Version

3.0.4

Reproduction link

https://jsfiddle.net/965sd2wo/1/

Steps to reproduce

When you create a class and you want to make it reactive, every method and getter inside the class that use refs stops work.

const { reactive,  ref } = Vue;

class Foo {
  name = ref("Homer");

  greet() {
    console.log('Hello ' + this.name.value);
  }
}
const homer = new Foo();

homer.greet(); // this print Hello Homer
reactive(homer).greet(); // this print Hello undefined

What is expected?

reactive(homer).greet(); should print its ref value as normal.

What is actually happening?

reactive() makes the access to ref directly without use .value but this affects to internal functions and getters.

This is inherent to how this works on JS and the fact that reactive unwraps refs, which is intended. You can either remove the usage of ref inside class if you wrap it later with reactive

class Foo {
    name = 'Homer'

    greet() {
    console.log('Hello ' + this.name);
  }
}

or use a function instead:

function createFoo {
  const name = ref('Homer')
  function greet () {
    console.log('Hello', name.value)
  }
  return { name, greet }
}

@posva thanks by the fast reply, and to not leave the problem in the air, because I think it could be a important problem and could be problematic for news APIs, there are a possibility to create a method "reactiveWithRefs" that make reactive but without unwrapping? this could solve the problem, or it is a breaking change?.

Thanks again.