title: Nuxt/Vue reactive body attributes
body: <p>I want to add the class <code>menu-opened</code> on the <code>body</code> tag when I click on the menu burger div.</p>
  
  <p><strong>My div</strong></p>
  
  <pre><code>&lt;div v-on:click="openMenu"&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>The openMenu method</strong></p>
  
  <pre><code>methods: {
       openMenu() {
         console.log('open menu launch')
         this.$store.dispatch('menu/setMenu', true)
       }
      }
  </code></pre>
  
  <p><strong>My store</strong></p>
  
  <pre><code>state = {
      isMenuOpen: false
  }
  
  actions = {
      setMenu({ commit }, value) {
        commit('SET_MENU_OPEN_STATUS', value)
      }
  }
  
  mutations= {
      SET_MENU_OPEN_STATUS(state, newState){
          state.isMenuOpen = newState
      }
  }
  </code></pre>
  
  <p>On my template, i got this code to add the class on the body based on the state of the isMenuOpen value : </p>
  
  <pre><code>export default {
      data() {
          return {
             menuState: this.$store.state.isMenuOpen
          }
      },
      head () {
        return {
          bodyAttrs: {
            class: this.menuState ? 'menu-opened' : ''
          }
        }
      }
  }
  </code></pre>
  
  <blockquote>
    <p>My store is working well, the value change when I click on my div, but it's not adding the class, like if the head function is not reactive...</p>
  </blockquote>
  
  <p>Thanks for your help</p>