React Hooks vs Vue Composition Api

import React, { useState, useEffect } from 'react';

const Form = ({ val, callback }) => {
  const [v, setV] = useState(val);

  useEffect(() => {
    console.log(`Current Value:${v}`);
  });

  const submit = (e) => {
    e.preventDefault();
    callback(v);
  };

  return (
    <form onSubmit={submit}>
      <label>
        <span>Value:</span>
        <input
          value={v}
          onChange={(e) => {
            setV(e.target.value);
          }}
        />
      </label>
      <button type="submit">提交</button>
    </form>
  );
};

export default Form;

<template>
  <form @submit="submit">
    <label>
      <span>Value:</span>
      <input
        :value="v"
        @change="
          (e) => {
            v = e.target.value;
          }
        "
      />
    </label>
    <button type="submit">提交</button>
  </form>
</template>
<script>
import { ref, watchEffect } from "vue";

export default {
  props: ["val"],
  setup(props, context) {
    const v = ref(props.val);

    watchEffect(() => {
      console.log(`Current Value:${v.value}`);
    });

    const submit = (e) => {
      e.preventDefault();
      context.emit("callback", v.value);
    };

    return { submit, v };
  },
};
</script>