Re-Render Sample

export const ParentReact = () => {
  const [count, setCount] = useState(0);
  
  const increment = () => {
    setCount((prev) => prev + 1);
  };

  return (
    <div>
      <h3>親コンポーネント</h3>
      <div>
        <button onClick={increment}>
          Increment
        </button>
        Count: {count}
      </div>
      <ChildReact />
    </div>
  );
};

export const ChildReact = () => {
  return (
    <div>
      子コンポーネント
    </div>
  );
};

<script setup>
  import { ref } from "vue";
  import ChildVue from "./child-vue.vue";

  const count = ref(0);

  const increment = () => {
    count.value++;
  };
</script>

<template>
  <div>
    <h3>親コンポーネント</h3>

    <div>
      <button @click="increment">
        Increment
      </button>
      Count: {{ count }}
    </div>

    <ChildVue />
  </div>
</template>

<template>
  <div>
    子コンポーネント
  </div>
</template>