在JS中同步修改vue中的变量

问题：在处理一个功能上遇到一个问题：在vue组件中，引入了一个JS文件，在JS文件动态创建了一些DOM节点，需要侦测dom节点中内容的变化同时改变vue中组件的内容。

思考：因为它是单独的一个JS文件，里面动态生成的dom可以通过oninput来侦测输入内容的变化，但要实时更新到vue组件中，那只能找他们的连接点或者搭桥(借助vuex、localStorage这些全局变量)，想着可以利用对象类型，因为其是将引用放在堆中，真正的值存放在栈中，通过传递其引用作为桥梁来达到JS文件中修改vue中值的效果。

解决：通过上述方式并不利于今后维护，其实我们可以巧妙利用闭包达到目的，这组件中定义需要修改的方法，通过在JS调用该该方法来达到修改vue组件变量的目的。

vue中如下:

<template>
  <div class="about" id="about">
    {{text}}
  </div>
</template>
<script>
import Test from './test'
export default {
  name: 'About',
  data () {
    return {
      text: 'gg'
    }
  },
  mounted () {
    const test = new Test(
      {
        hooks: {
          input: value => this.text = value
        }
      }
    )
  }
}
</script>

类中方法

export default class Test {
  constructor(props = {}) {
    this.options = Object.assign({
      mode: 'write'
    }, props)
      this.create()
    }
    create() {
      let about = document.getElementById('about')
      let div = document.createElement('div')
      div.innerHTML = '<input type="text" id="inputText">'
      about.appendChild(div)
      let input = document.getElementById('inputText')
      input.addEventListener('input', () => {
          this.options.hooks.input(input.value)
      })
    }
}