Ref in class in Ref not working

[eosgortor]

Write a class that has a ref as private member and add a get and set method. When putting the class instance into a ref, the member cannot be used inside of the class anymore. Is this a bug or am I doing something wrong?

You may want to look at the minimal sample I wrote. Press the button to see the error.

export class ClassWithRef {
  private myRef = ref("SomeValue 0");
  private valueCounter = 0;

  public getValue() {
    return this.myRef.value;
  }

  public nextValue() {
    this.valueCounter++;
    this.myRef.value = "SomeValue " + this.valueCounter;
  }
}

import { ref } from "vue";
import { ClassWithRef } from "./classWithRef";

const classRef = ref(new ClassWithRef());

const onNextValue = () => {
  classRef.value.nextValue();
};
</script>

<template>
  <div>{{ classRef.myRef }}</div>
  <button @click="onNextValue">Next Value</button>
</template>

[jh-leong]

This is related to issue #2981. You can find a workaround here: comment link.