在JS中如何同步修改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)
      })
    }
}

const app = new Vue({
            el: '#app',
            data: {
                list:[1,2,3],
            },
            methods: {
                test() {
                    let temp = this.list; // 将list赋值给了temp
                    temp = [1,2], // temp发生改变
                    console.log(temp); // 打印结果 [1,2]
                    console.log(this.list); // 打印结果 [1,2]
                }
            }
        });

const app = new Vue({
            el: '#app',
            data: {
                list:[1,2,3],
            },
            methods: {
                test() {
                    let temp = JSON.parse(JSON.stringify(this.list)); // 将list赋值给了temp
                    temp = [1,2], // temp发生改变
                    console.log(temp); // 打印结果 [1,2]
                    console.log(this.list); // 打印结果 [1,2,3]
                }
            }
        });