JSFiddle - React, Tailwind, and code Playground

HTML

<div id="app">   
    <button type="button" v-on:click="testAction()">TestAction</button>
    <button type="button" v-on:click="propsId++">increment</button>
        
    <modal-component ref="child1" v-bind:props-id="{ propsId }"></modal-component>
</div>

<script type="text/x-template" id="modal-component-id">
    <div>
        今のidは「{{ id }}」です。
    </div>
</script>


<script src="https://unpkg.com/vue@next"></script>

JavaScript

const modalComponent = {
  template: "#modal-component-id",

  props: ["propsId"],

  data() {
    return {
      // 取得できなかった
      id: this.propsId.propsId
    }
  },

  /*computed: {
    id() {
      return this.propsId.propsId
    },
  },*/

  methods: {
    initialModal() {
      console.log('子',this.id);
    },
  }
};

const app = Vue.createApp({
  data() {
    return {
      propsId: 1,
    }
  },

  components: {
    "modal-component": modalComponent
  },

  methods: {
    testAction() {
      console.log('親',this.propsId);
      this.$refs.child1.initialModal();
    }
  }
});

app.mount("#app");