Fixed Simple State management section to use reactive (#372)

* fix: fixed state management to use reactive

* Update src/guide/state-management.md

Co-authored-by: Phan An <me@phanan.net>

Co-authored-by: Phan An <me@phanan.net>

Author: NataliaTepluhina

src/guide/state-management.md

@@ -10,51 +10,68 @@ If you're coming from React, you may be wondering how vuex compares to [redux](h
 
 ## Simple State Management from Scratch
 
-It is often overlooked that the source of truth in Vue applications is the raw `data` object - a component instance only proxies access to it. Therefore, if you have a piece of state that should be shared by multiple instances, you can share it by identity:
+It is often overlooked that the source of truth in Vue applications is the reactive `data` object - a component instance only proxies access to it. Therefore, if you have a piece of state that should be shared by multiple instances, you can use a [reactive](/guide/reactivity-fundamentals.html#declaring-reactive-state) method to make an object reactive:
 
-``` js
-const sourceOfTruth = {
-    message: 'Hello'
-}
+```js
+const sourceOfTruth = Vue.reactive({
+  message: 'Hello'
+})
 
 const appA = Vue.createApp({
-  data () {
+  data() {
     return sourceOfTruth
   }
 }).mount('#app-a')
 
 const appB = Vue.createApp({
-  data () {
+  data() {
     return sourceOfTruth
   }
 }).mount('#app-b')
 ```
 
-Now whenever `sourceOfTruth` is mutated, both `appA` and `appB` will update their views automatically. Subcomponents within each of these instances would also have access via `this.$root.$data`. We have a single source of truth now, but debugging would be a nightmare. Any piece of data could be changed by any part of our app at any time, without leaving a trace.
+```html
+<div id="app-a">App A: {{ message }}</div>
+
+<div id="app-b">App B: {{ message }}</div>
+```
+
+Now whenever `sourceOfTruth` is mutated, both `appA` and `appB` will update their views automatically. We have a single source of truth now, but debugging would be a nightmare. Any piece of data could be changed by any part of our app at any time, without leaving a trace.
+
+```js
+const appB = Vue.createApp({
+  data() {
+    return sourceOfTruth
+  },
+  mounted() {
+    sourceOfTruth.message = 'Goodbye' // both apps will render 'Goodbye' message now
+  }
+}).mount('#app-b')
+```
 
 To help solve this problem, we can adopt a **store pattern**:
 
-``` js
+```js
 const store = {
   debug: true,
 
-  state: {
+  state: Vue.reactive({
     message: 'Hello!'
-  },
+  }),
 
-  setMessageAction (newValue) {
+  setMessageAction(newValue) {
     if (this.debug) {
       console.log('setMessageAction triggered with', newValue)
     }
 
     this.state.message = newValue
   },
 
-  clearMessageAction () {
+  clearMessageAction() {
     if (this.debug) {
       console.log('clearMessageAction triggered')
     }
-    
+
     this.state.message = ''
   }
 }
@@ -64,18 +81,27 @@ Notice all actions that mutate the store's state are put inside the store itself
 
 In addition, each instance/component can still own and manage its own private state:
 
-``` js
+```html
+<div id="app-a">{{sharedState.message}}</div>
+
+<div id="app-b">{{sharedState.message}}</div>
+```
+
+```js
 const appA = Vue.createApp({
-  data () {
+  data() {
     return {
       privateState: {},
       sharedState: store.state
     }
+  },
+  mounted() {
+    store.setMessageAction('Goodbye!')
   }
 }).mount('#app-a')
 
 const appB = Vue.createApp({
-  data () {
+  data() {
     return {
       privateState: {},
       sharedState: store.state
@@ -92,4 +118,4 @@ You should never replace the original state object in your actions - the compone
 
 As we continue developing the convention where components are never allowed to directly mutate state that belongs to a store, but should instead dispatch events that notify the store to perform actions, we eventually arrive at the [Flux](https://facebook.github.io/flux/) architecture. The benefit of this convention is we can record all state mutations happening to the store and implement advanced debugging helpers such as mutation logs, snapshots, and history re-rolls / time travel.
 
-This brings us full circle back to [vuex](https://github.com/vuejs/vuex), so if you've read this far it's probably time to try it out!
+This brings us full circle back to [Vuex](https://github.com/vuejs/vuex), so if you've read this far it's probably time to try it out!