Vue актуализирующая переменная

Question

Я использую vue.js, и у меня есть приложение с

var vm = new Vue({
    el: '#app',
    data: function() {
       return {
          elements: json_data,
       }
    }
})

У меня также есть файл js, который я импортирую в свой HTML:

<script src="javascriptFile.js" defer></script>

json_data - это глобальная переменная внутри javascriptFile.js.Когда я изменяю файл, мое приложение vue не перезагружает компонент, который я использую, с новыми данными.Как я могу это сделать?

Answer 1

Из документов Vue https://vuejs.org/v2/api/#data

data

Объект данных для экземпляра Vue.Vue будет рекурсивно преобразовывать свои свойства в методы получения / установки, чтобы сделать его «реактивным».

Поскольку вы манипулируете значением данных вне Vue (без использования this.json_data), вы не позволяете Vueотслеживать изменения и реагировать на них.Вам следует либо переместить внешнюю логику в компонент (как методы), чтобы установить значение json_data с помощью this.json_data, либо использовать Vuex, если ваше приложение достаточно сложное.