Vue2中修改对象属性值后视图没有同步更新

最近写代码时遇到个小问题，在Vue2中修改对象属性值后视图没有同步更新，以下是部分代码

<template>
    ......

    <el-form-item label="接收用户Id" prop="userIds">
        <el-input
            v-model="form.userIds"
            type="textarea"
            :rows="5"
            placeholder="请输入接收的用户Id，多个用户用英文逗号隔开，填*则为全部用户"
        />
        <el-button type="primary" @click="selectAllUsers" plain size="mini">
            全部用户
        </el-button>
    </el-form-item>

    ......
</template>

<script>
export default {
    data() {
        return {
          form: {},
        };
    },
    methods: {
        selectAllUsers() {
            this.form.userIds = "*";
        },
    }
}
</script>

点击按钮触发 selectAllUsers 方法，执行 this.form.userIds = "*" 后视图没有同步更新，是因为userIds 最初未在 data 中声明，直接赋值 this.form.userIds = "*" 不会触发响应式更新。

以下是两种解决办法：

• 在 data 中提前定义 userIds 属性

• 通过this.$set（或 Vue.set）：this.$set(this.form, "userIds", "*")