Vue.js Vuejs动态div文本

我有一个Vue组件，里面有一些数据。我还有一个元素，它绑定到组件的脚本标记内的数据。问题是，我使用另一个组件将数据推送到这个组件，因此当推送新数据时，div应该动态更改。然而，我的情况并非如此。尽管I console.log中的数据会发生更改，但div也不会动态更改。代码如下：

 Main component:
<template>
  <div class="small">
    <div v-text="x">{{x}}</div>
  </div>
</template>

<script>



  export default {
    components: {
      ExternalComponent
    },
    data() {
      return {
        x: 0
      }
    },
    async mounted() {

    },
    methods: {
      receiveData(data) {
        this.x = data;
      }

    }
  }
</script>

<style>
</style>

External component: 
 <template>
      <div class="R">
      </div>
    </template>

    <script>


      import MainComponent from './MainComponent'

      export default {
        components: {
          MainComponent
        },
        data() {
          return {

          }
        },
        async mounted() {

        },
        methods: {
             clickListener() {
                $('.R').on('click', function(event) {
                   MainComponent.methods.receiveData(12)
                });
            }

        }
      }
    </script>

    <style> 
    </style>

---

基本上，我希望在每次单击外部组件时，都能从主组件中的div中推送和读取数据，因为将发送不同类型的数据。

您不能像这样在组件之间传递数据

对于家长->子女沟通，请使用道具：

对于子级->父级通信使用事件：

对于更复杂的通信，可以使用vuex

---

子组件上的直接方法调用的另一个选项是通过refs:

请为此发布一篇文章。伙计们，有人知道吗？好的，谢谢！我会尽力去做，并会让你知道它是否有效。