VueJS linear-guage не отображается

У меня есть цикл, и если я просматриваю исходный код, я вижу, что значение передано правильно. Однако в шаблоне используются:

"vue-canvas-gauges": "0.0.0",
"canvas-gauges": "^2.1.5",

Если я открываю консоль и что-нибудь редактирую, она перерисовывается и показывает значение.

вот соответствующая часть шаблона:

<div class = "col-xs-3 col-xs-offset-1" v-for = "item in buildings">
    <div class = "panel panel-default">
        <div class = "panel-heading">{{item.name}}</div>
        <div class = "panel-body">
            <canvas data-width = "100" :data-value = "item.completion_status" data-type = "linear-gauge"></canvas>
        </div>
    </div>
</div>

У меня есть следующий метод, называемый установленным:

methods: {
  async fetchData() {
    axios.get('/api/v1/buildings').then(response => {
      this.buildings=response.data.data;
    });
  }
}

Итак, при установке я вызываю this.fetchData, и сгенерированный HTML на странице правильный

<div class = "col-xs-3 col-xs-offset-1">
    <div class = "panel panel-default">
        <div class = "panel-heading">Bldg1</div> 
        <div class = "panel-body">
            <canvas data-width = "100" width = "100" data-value = "0" data-type = "linear-gauge"></canvas>
        </div>
    </div>
</div>

Я попытался использовать идею push из следующего ответа: Vue.js - шаблон компонента не отображается с помощью v-for