字典值直到Vue.js中的下一个方法调用才显示

Question

我在页面上显示字典的值，当我以编程方式更新值时，在下一次方法调用之前，值不会更新。我正在使用一个按钮添加这些值，该按钮最初会对值进行查询。

1. 用户首先在文本框中输入一个值，该值会在每个键输入上触发此方法。

   queryForValue: function() {
       // some logic here to search for possible values
   }
   

2. 一旦用户从结果列表中选择一个值，我就会调用此方法：

   addValueToList: function (valueId) {
       axios.get('http://localhost:3000/values/'.concat(valueId))
           .then((response) => {
               var responseValues = Object.values(JSON.parse(response.data).values);
               var obj = {
                   quantity: 1,
                   subvalues:  subvalues
               };
               this.valueDictionary[value.label] = obj;
           }
       }
   }
   

3. 当我尝试在页面上显示字典的值时，它们不会更新。

   <div class="summary">
           <span class="summary-heading">Summary</span>
           <br>
           {{ valueDictionary }}
   </div>
   

当用户在文本框中键入另一个值并触发queryForValue时，字典的值将显示在页面上。

我不确定这是否与生命周期有关。