Vue.js 更改Vue上{{vari}}的值

我刚开始使用vue js，我花了几个小时的时间努力做一些非常简单的事情，比如在挂载函数上使用js更改{{vari}}的值。有人能给我一个答案吗？我希望该段落在进入mounted（）函数时显示与teste不同的消息

编辑：谢谢。为什么当我试图在函数中更改它时它不起作用

 mounted () { 



    atualiza();

    function atualiza(){ 

      this.vari = String("bla");
    }

} 

不会工作，因为函数将创建自己的作用域，拥有“this”对象。你有两个选择。首先，将“this”对象保存到变量并使用保存的“this”：

第二种更常见的选择是使用箭头函数，而不是普通函数，因为这些箭头函数没有自己的“this”对象：

这也行，但是。。。尽量不要在函数中创建函数。创建所有函数作为Vue组件的方法。它将提高您的代码可读性，并且您不会再有上下文方面的问题：

<template>
  <div class="teste">
    <p>{{ vari }}</p>
  </div>
</template>

export default {
  name: 'Schedual',

  data: function () {
    return {
      vari: 'teste'
    }
  },

  methods: {
    actualiza () {
      this.vari = 'bla'
    }
  },

  mounted () {
    this.actualiza()
  }
}

{{vari}}

导出默认值{
名称：'Schedual'，
数据：函数（）{
返回{
变形金刚：“睾丸”
}
},
方法：{
现实主义（）{
this.vari='bla'
}
},
挂载（）{
这个
}
}

有人知道为什么如果我更改函数中的值，它就不再工作了吗？

 mounted () { 



    atualiza();

    function atualiza(){ 

      this.vari = String("bla");
    }

} 

<template>
  <div class="teste">
    <p>{{ vari }}</p>
  </div>
</template>

export default {
  name: 'Schedual',

  data: function () {
    return {
      vari: 'teste'
    }
  },

  mounted () {
    this.vari = 'other value'
  }
}

mounted () {
  function actualiza () { 
    this.vari = 'bla'
  }

  actualiza()
}

mounted () {
  let self = this

  function actualiza () { 
    self.vari = 'bla'
  }

  actualiza()
}

mounted () {
  const actualiza = () => { 
    this.vari = 'bla'
  }

  actualiza()
}

<template>
  <div class="teste">
    <p>{{ vari }}</p>
  </div>
</template>

export default {
  name: 'Schedual',

  data: function () {
    return {
      vari: 'teste'
    }
  },

  methods: {
    actualiza () {
      this.vari = 'bla'
    }
  },

  mounted () {
    this.actualiza()
  }
}