[Nuxt2(bridge)]Composableな関数でPropsをreactiveに

コンポーネントに与えられたPropsの値が変更したときに、Composableな関数内で、変更値を取得する方法（reactive)

動作環境

• nuxt: ^2.15.8
• @nuxtjs/composition-api: ^0.32.0

Composable関数

useCustomComposable.js

import { reactive, toRefs } from 'vue';

export function useCustomComposable(props) {
  const state = reactive({
    ...toRefs(props) // ここでpropsに含まれる変数をreactiveにする
  });

  // 他のロジックや関数をここに追加

  return {
    ...state
  };
}

コンポーネント

ParentComponent.vue

<script>
import { defineComponent } from 'vue';
import { useCustomComposable } from './useCustomComposable';

export default defineComponent({
  props: {
    message: {
      type: String,
      default: ''
    },
    
    ...
    
  },
  setup(props) {
    //ここでComposableな関数にpropsを与える
    const { message } = useCustomComposable(props);

    return {
      message
    };
  }
});
</script>