How Do I Watch Variable in Framework7 Store

I started building my app using the new built in store system and Im trying to avoid using vuex. I have a variable that changes frequently. I have used the following code when working with vuex.

store.watch((state) => state.status, (newValue) => { self.status= newValue; });

I am hoping there is a way to do it without vuex. Any help is greatly appreciated.

<template>
  <f7-navbar>
    <f7-nav-left>
      <f7-link icon="icon-bars" href="/leftsidebar/" data-ignore-cache="true">
         <f7-icon ios="f7:menu" md="material:menu" aurora="f7:menu"></f7-icon>
      </f7-link>
    </f7-nav-left>
    <f7-nav-right>
      <f7-link icon="icon-bars" href="/connect/" data-ignore-cache="true">
         <f7-icon ios="f7:globe" md="material:public" aurora="f7:globe"></f7-icon>
      </f7-link>
      <f7-link icon="icon-bars" href="/rightsidebar/" data-ignore-cache="true">
         <f7-icon ios="f7:gear_alt_fill" md="material:settings" aurora="f7:gear_alt_fill"></f7-icon>
      </f7-link>
    </f7-nav-right>
  </f7-navbar>
</template>
<script>
  import store from '../js/store';
  export default {
    name: "pageheader",
    props: {
      f7router: Object,
    },
    data() {
      return {
        offline:true
      };
    },
    mounted(){
      var self = this;
      self.offline = store.state.offline;

      // This is where I am trying to create the watcher
      store.watch((state) => state.offline, (newValue, oldValue) => { 
         self.offline = newValue; });
      }
  };
</script>

Update: I have included an example of a header component where I wish to watch the offline status in my store.

from How Do I Watch Variable in Framework7 Store