Revision history [back]

One way to re-activate a different reactive object in Vue is to use the watch property. First, create a new data property that will hold the new reactive object. Then, use the watch property to monitor this new data property for changes. When the new data property changes, update the original reactive object by assigning the new reactive object to the original property.

Example:

<template>
  <div>
    <p>Current User: {{ user.name }}</p>
    <button @click="changeUser">Change User</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: { name: "John Doe", age: 30 },
      newUser: { name: "Jane Smith", age: 25 },
    };
  },
  watch: {
    newUser(newVal) {
      this.user = newVal;
    },
  },
  methods: {
    changeUser() {
      this.newUser = { name: "Mary Johnson", age: 40 };
    },
  },
};
</script>

In this example, a user object is initially set to { name: "John Doe", age: 30 }. When the changeUser method is called, the newUser data property is updated to { name: "Mary Johnson", age: 40 }. The watch property monitors the newUser data property for changes, and when a change is detected, assigns the new object to the user property, effectively re-activating a different reactive object. The template reflects this change by showing the new user's name.