Vue 3: Why can I not set two ref's with the same object

The problem:

Whenever I try to set two ref variables with the same Object they will share the same reactivity inside of the component.

When I click the checkbox ref1.test and ref2.test will change both, while the v-model is only for ref1.test


  ref1: {{ ref1 }} ref2: {{ ref2 }}

  <input type="checkbox" v-model="ref1.test" />

<script lang="ts">
import { defineComponent, ref } from "vue";
import { TestModel } from "@/TestModel";

export default defineComponent({
  setup() {

    const testObj = { test: false } as TestModel;

    const ref1 = ref<TestModel>({});
    ref1.value = testObj;

    const ref2 = ref<TestModel>({});
    ref2.value = testObj;

    return {


export interface TestModel {
  test?: boolean;

Can someone explain this or tell me if this is normal? (I know how to solve this, but I just wanna know why this is happening)

>Solution :

Because Vue’s reactivity is just proxy. It uses proxy so it knows what to do when a value change.

Proxy A (ref1) -> read/write testObj

Proxy B (ref2) -> read/write testObj


According to the Vue’s docs

ref does the following:

If an object is assigned as a ref’s value, the object is made deeply reactive with reactive().


reactive does the following:

Returns a reactive proxy of the object.

The returned object and its nested objects are wrapped with ES Proxy


Leave a Reply