Всем привет, помогите, пожалуйста, с пониманием Vue Есть компонент: Vue.component("test", {

Question

Всем привет, помогите, пожалуйста, с пониманием Vue Есть компонент: Vue.component("test", {

props: {
value: {
type: Number
}
},
template: `
<div id="test" class="container">
<div class="row">
{{ value }}
</div>
</div>
`,
mounted() {
this.value = 23;
}
});

Упоминание его в странице:
<body>
<div id="app">
<test value="2"></test>
</div>
</body>

1) При инициализации value компонента test в html {{ value }} изменяется верно ({{ value }} и value в DOM равны)
2) При изменении извне компонента через $("#test").attr("value", 12) value в DOM меняется, а {{ value }} в компоненте нет (КАК ПРАВИЛЬНО МЕНЯТЬ?!!!)
3) При изменении value изнутри компонента {{ value }} меняется, а value в DOM нет (КАК ПРАВИЛЬНО МЕНЯТЬ?!!!)
4) Как синхронизировать value в DOM и value свойство компонента, и при изменении одного, чтобы менялось другое?

знаю про шину сообщений (событий), но может есть простое решение?