I'm having trouble grasping Vue completely. For example, consider the following code snippets:
<!--store.js-->
export default {
x:{
p:{},
},
}
<!--text.vue-->
<template>
<div class="test-comp">Test component</div>
</template>
<script>
import store from '../store';
export default {
data(){
return {
p:store.x.p,
};
},
methods:{
loadData(){
store.x.p.a='some data';
},
},
mounted(){
this.loadData();
}
}
</script>
After running the file, in Vue, this.p ends up being an empty object {}. However, in plain JavaScript, when I do let p=store.x.p, it creates a reference so that p points to the same value as store.x.p.
What am I missing or doing incorrectly in my Vue implementation?
My apologies, everyone. It seems like there might be a mistake elsewhere because this code works fine on fiddle.