Why doesn't V-for work after updating DATA properties received from the database?

Question

1C-Bitrix

The task is to create a page with the calculation of the cost of a chimney kit on the website of an online store running on 1-s Bitrix.
The client sets the necessary parameters for height, diameter, ways to connect the chimney and at the end receives a table with a list of the necessary elements of the kit indicating the quantity and cost.
- When choosing from DATA - the VUE reqestlist property: - the list of IDs is selected - the required goods,
- the data is assigned to the property demand: null , - the observable and after the change it executes the watch: function - AJAX request to the database and obtaining data in JSON of the necessary goods (names , prices, links to images, etc.).
- An array with data is assigned to the DATA property list: (initially the value is set to null) , and after that they should be drawn in the form of a table in the v-for loop in the template.

<script>
  var app = new Vue({
    el: '#add',
    data: {
      way:{
        type: null,
        isActive: false
      },
      diam: {
        type: null,
        show: false
      },
      hight: {
        type: null,
        show: false
      },
      demand: null,
      reqestlist: {  //Списки ID - выборки необходимой группы товаров
        nasad: {
          130: '1602,1659,1617,1650,1573,1561,1656,1644,1638',
          150: '1603,1660,1619,1651,1574,1562,1657,1645,1639',
          200: '1604,1661,1618,1652,1575,1563,1658,1646,1640'
        },
        nasten: {
          130: '1605,1564,1579,1632,1596,1617,1650,1573,1561,1656',
          150: '1606,1565,1579,1633,1597,1619,1651,1574,1562,1657',
          200: '1607,1566,1579,1634,1598,1618,1652,1575,1563,1658'
        }
      },
      list: null,
      items: {
        show: false
      }
    },
    methods: {
      chooseWay: function(event) {
        this.way.type = event.currentTarget.getAttribute('data-typeinstal');
        let elemWay = document.querySelectorAll('.chimney_way_img-block');
        for(let i=0; i < elemWay.length; i++) {
          elemWay[i].classList.remove('chimney_way-active');
        }
        event.currentTarget.classList.add('chimney_way-active');
        this.diam.show = true;
      },
      chooseDiam: function name(even) {
        this.diam.type = even.target.dataset.diam;
        let elemWay = document.querySelectorAll('.chimney_diam-item');
        for(let i=0; i < elemWay.length; i++){
          elemWay[i].classList.remove('chimney_diam-active');
        }
        event.currentTarget.classList.add('chimney_diam-active');
        this.hight.show = true;
        //console.log(this.diam.type)
      },
      chooseHight: function (event) {
        this.hight.type = event.target.value
        this.demand = this.reqestlist[this.way.type][this.diam.type];
        //console.log(this.demand)
      }
    },
    watch: {
     	demand: function (val) {   //  при изменении свойства demand, получения списка ID, AJAX - запрос 
        let request = new XMLHttpRequest();
        request.open('POST', 'http://nordpechi.ru/catalog/chimneys/calculation-chimneys/online.php', true);
        request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
        
        request.onreadystatechange = function() {
          if (this.readyState === 4) {
            if (this.status >= 200 && this.status < 400) {
            // Success!					
            this.list = JSON.parse(this.responseText); // Свойству list - массив данных от сервера с товарами			
            //console.log(this.list);
          } else {
            // Error 
            alert('Ошибка прилетела!')
            }
          }
        };
        request.send('ListId='+this.demand);				
        this.items.show = true;	
      }
    }
  })
</script>

In the template in the table with the results - after receiving products from the database and assigning them to the List property, in the v-for loop - a list of products should be formed, but this does not happen. Despite assigning the received data array to the property, and changing the initially set value - null - v-for does not work. There are no error messages in the console.
I understand that the error is somewhere in the logic, but I can not understand where. Please help the community!

<div id="add">

  <div class="chimney_wrap">			
      <h3>Укажите способ подключения дымохода</h3>
      <section class="chimney_way-wrap">
        <div class="chimney_way_img-wrap">
          <div v-on:click.prevent="chooseWay" data-typeinstal="nasad" class="chimney_way_img-block">
            <img src="/upload/img/schiedel/online/nasad.jpg" alt="Насадной" class="chimney_way_img">
            <p class="chimney_way_img-title">Насадной</p>
          </div>
          <div v-on:click="chooseWay" data-typeinstal="nasten" class="chimney_way_img-block">
            <img src="/upload/img/schiedel/online/nasten.jpg" alt="Настенный" class="chimney_way_img">
            <p class="chimney_way_img-title">Настенный</p>
          </div>
        </div>
      </section>

      <section v-show="diam.show" class="chimney_diam-wrap">
        <h3>Выбирите диаметр дымохода</h3>
        <ul class="chimney_diam-list">
          <li v-on:click="chooseDiam" data-diam="130" class="chimney_diam-item">&empty; 130</li>
          <li v-on:click="chooseDiam" data-diam="150" class="chimney_diam-item">&empty; 150</li>
          <li v-on:click="chooseDiam" data-diam="200" class="chimney_diam-item">&empty; 200</li>
        </ul>
      </section>

      <section v-show="hight.show" class="chimney_hight-wrap">
        <h3>Укажите высоту дымохода</h3>

        <select v-model="hight.type" @change="chooseHight" class="chimney_hight-list">
          <option value="4">4 м</option>
          <option value="5">5 м</option>
          <option value="6">6 м</option>
          <option value="7">7 м</option>
          <option value="8">8 м</option>
          <option value="9">9 м</option>
          <option value="10">10 м</option>
        </select>
      </section>

      <!-- Таблица с результатами -->
      <div v-show="items.show" class="chimney_list-wrap">
        <table class="chimney_list">
          <thead>
            <tr>
              <th>№</th>
              <th>Photo</th>
              <th>Наименование</th>
              <th>Кол-во</th>
              <th>Цена</th>
            </tr>
          </thead>
          <tbody>

            <tr v-for="(elem, index) in list"> <!--  Элемент итерируется в цикле v-for VUE.JS -->
              <td>{{ index +1}}</td>
              <td><a v-bind:href="elem.link" target="_blank"><img v-bind:src="elem.picture" v-bind:alt="elem.name"></a></td>
              <td><a v-bind:href="elem.link" target="_blank">{{ elem.name.replace('&amp;#216;', 'Ø')  }}</a></td>
              <td>1</td>
              <td>{{ elem.price.toLocaleString() }}</td>
            </tr>

            <tr class="chimney_list-result">
              <td colspan="3">Итого:</td>
              <td>9</td>
              <td>12019</td>
            </tr>
          </tbody>
        </table>
      </div>

  </div>
</div>

I understand, maybe I’m a shitcoder, I’m not a magician yet, I’m just learning.
Perhaps this problem can be solved in a more rational way, I will be grateful for any advice!

Answer 1

Question removed. Error found.
Tried to work with this data- inside another function that has its own context!