Vue binding object, array data cannot be dynamically rendered case detailed explanation

async getParametersList() {
      this.cat_id = this.currentSelect[this.currentSelect.length - 1];
      const { data: res } = await this.$http.get(
        `categories/${this.cat_id}/attributes`,
        {
          params: { sel: "many" }
        }
      );
      this.paramasData = res.data;
 
      res.data.forEach(item => {
        item.attr_vals = item.attr_vals ? item.attr_vals.split(" ") : [];
        //Control the display and hiding of the text box item.inputVisible=false
        //The value entered in the text box item.inputValue=''
        console.log(item)
      });
      console.log(this.paramasData);
    },

//Click the button to display the dialog box //Click the button to display the text input box showInput(row) {
      row.inputVisible = true
      // Let the text box automatically get the focus // The function of the $nextTick method is to specify the code in the callback function only after the elements on the page are re-rendered // this.$nextTick((_) => {
      // this.$refs.saveTagInput.$refs.input.focus()
      // })
    },

async getParametersList() {
      this.cat_id = this.currentSelect[this.currentSelect.length - 1];
      const { data: res } = await this.$http.get(
        `categories/${this.cat_id}/attributes`,
        {
          params: { sel: "many" }
        }
      );
      
 
      res.data.forEach(item => {
        item.attr_vals = item.attr_vals ? item.attr_vals.split(" ") : [];
        //Control the display and hiding of the text box item.inputVisible=false
        //The value entered in the text box item.inputValue=''
        console.log(item)
      });
      this.paramasData = res.data;
      console.log(this.paramasData);
    },