Как установить значение в хранилище сеанса с помощью vueJS с помощью раскрывающегося списка ajax, выберите значение других изменений

Question

, когда я выбираю опцию выпадающего меню и меняю другое значение в качестве кода продукта. Я получаю проблему, что когда я нажимаю кнопку «Добавить», чтобы установить это значение в хранилище сеанса с vuejs, это не сработало, но когда я заполняю поле, введите это значение времени, установленное в хранилище сеанса.

Я попытался с помощью ajax изменить значение, выбрав код продукта и присвоив ему значение в хранилище сессии с помощью vuejs.

Это код главной страницы:

<div id="app">
        <table class="table table-sm">
          <tr>
            <th>Product Code</th>
            <th>Product Name</th>
            <th>Product Price</th>
            <th>Action</th>
          </tr>
          <tr>
            <td>
              <select v-model="newCat.mtype" id="" class="form-control-sm form-control code">
              <?php
                $db = new mysqli("localhost","root","","test");

                $select = $db->query("select code from product");

                while (list($code) = $select->fetch_row()) {
                  echo "<option value='$code'>$code</option>";
                }
              ?>
              </select>
            </td>
            <td>
              <input type="text" v-model="newCat.name" class="form-control-sm form-control name"/>
            </td>
            <td>
              <input type="text" v-model="newCat.rules" class="form-control-sm form-control price"/>
            </td>
            <td>
              <button class="btn btn-sm" @click="addCat">+</button>
            </td>
          </tr>
        </table>
          <br>
          <div class="table-responsive">
            <table class="table table-sm">
              <tr>
                <th>Code</th>
                <th>Product Name</th>
                <th>Product Price</th>
                <th class="text-center">Action</th>
              </tr>
              <tr v-for="(cat, n) in cats">
                <td>{{cat.mtype}}</td>
                <td>{{cat.name}}</td>
                <td>{{cat.rules}}</td>
                <td class="text-center"><button @click="removeCat(n)" class="btn btn-sm btn-danger">Remove</button></td>
              </tr>
            </table>
          </div>
      </div>

<script>
$(function(){
  $(".code").change(function(){
    var code = $(this).val();

    $.ajax({
      url : 'select.php',
      method : 'POST',
      dataType : 'JSON',
      data : {code:code},
      success : function(echo){
        $('.name').val(echo.name);
        $('.price').val(echo.price);
      }
    });

  });
})

Это мой код Vue:

const app = new Vue({
  el: '#app',

  data: {
    cats: [],
    newCat: {mtype:'',name:'',rules:''}
  },
  mounted() {
    if (localStorage.getItem('cats')) {
      try {
        this.cats = JSON.parse(localStorage.getItem('cats'));
      }catch(e){
        localStorage.removeItem('cats');
      }
    }
  },
  methods: {
    addCat() {
      // ensure they actually typed something
      if (!this.newCat) {
        return;
      }

      this.cats.push(this.newCat);
      this.newCat = {mtype:'',name:'',rules:''};
      this.saveCats();
    },
    removeCat(x) {
      this.cats.splice(x, 1);
      this.saveCats();
    },
    saveCats() {
      const parsed = JSON.stringify(this.cats);
      localStorage.setItem('cats', parsed);
    }
  }
})

Вот скриншот Когда я выбираю опцию раскрывающегося списка

Когда я выбираю опцию раскрывающегося списка

При нажатии кнопки Добавить

Но когда я выбираю выпадающий и вручную введите другое поле

Тогда результат