Vue 更新对象或数组数据时页面刷新的理解

<template>
  <div>
      <p>info1:</p>
      <ul>
        <li v-for="(item, key) in info1" :key="key">{
  {key}}={
  {item}}</li>
      </ul>
      <el-button @click="updateInfo1"  type="text" size="small">修改info1</el-button><br>


      <p>info2:</p>
      <ul>
        <li v-for="(item, key) in info2" :key="key">{
  {key}}={
  {item}}</li>
      </ul>
      <el-button @click="updateInfo2"  type="text" size="small">修改info2</el-button><br>

      <p>Names:</p>
      <ul>
        <li v-for="(item, index) in names" :key="index">{
  {item}}</li>
      </ul>
      <el-button @click="updateNames"  type="text" size&#