Are there any issues in vue3 when using reactive function on data that also has methods (to get namespaced data and methods in template)? - vuejs3

Question

Is it ok to use reactive function on data that also has methods. The reason for doing it is that otherwise I would have to use .value in template. My goal is to have nested (namespaced) method names in template as well. Would there be another way to get nested (namespaced) method and data names?
Excerpt from code (full example in codepen link below):
setup() {
const feature1 = function () {
const feature1Name = Vue.ref("feature1Default");
const feature1ChangeName = function () {
console.log("called", "feature1ChangeName");
feature1Name.value = "feature1Changed";
};
return { feature1Name, feature1ChangeName };
};
return { feature1: Vue.reactive(feature1()) }
}
https://codepen.io/realmerx/pen/abZqQYL?editors=1010

Answer 1

The functions are unnecessary, it is just a matter of formatting preference
instead of
const feature1 = function() {
const feature1Name = Vue.ref("feature1Default");
const feature1ChangeName = function() {
console.log("called", "feature1ChangeName");
feature1Name.value = "feature1Changed";
};
return { feature1Name, feature1ChangeName };
};
you could do
const feature1 = {
feature1Name: Vue.ref("feature1Default"),
feature1ChangeName: function() {
console.log("called", "feature1ChangeName");
feature1.feature1Name.value = "feature1Changed";
}
};
...but the important part in there seems to be that the ref is encapsulated in a reactive, which I suspect might add some overhead on the processing of reactivity.
You can get around that with a single reactive. You won't need to wrap it in additional reactivity or a function, and the code will work the same way (without any changes needed to the template). Note that the .value is missing from the assignment in the feature2ChangeName method.
const feature2 = Vue.reactive({
feature2Name: "feature2Default",
feature2ChangeName: () => {
feature2.feature2Name = "feature2Changed";
}
});
return {
feature2
};