Vuex store is not detected by injected single file template

[naive17]

I have a main.js like this

import Vue from 'vue'
import Vuex from 'vuex'
import VueRouter from 'vue-router'
import Vonic from 'vonic/dist/vonic.min.js'
import Check from './components/check.vue'
import Main from './components/main.vue'
import Fatture from './components/fatture.vue'
import Login from './components/login.vue'
import { nap } from 'take-a-nap'
import 'vonic/dist/vonic.min.css';

window.nap = nap;

Vue.use(Vuex);
Vue.config.devtools = true;


const store = new Vuex.Store({
  state: {
    name: "dsfsdfsd",
    contratto : "asdads"
  },
  mutations: {
    contratto (state,c) {
      state.contratto = c
    },
    name (state,c) {
      state.name = c
    }
  }
})


const routes = [{ path: '/login', component: Login},
                { path: '/', component: Main},
                { path: '/check', component: Check },
                { path: '/fatture', component: Fatture }];

Vue.use(Vonic.app,
       {routes : routes,
        store : store});

and the fatture template is this

<template>
    <div von-app="" transition-direction="forward">
      <div von-nav="" class="navbar visible" style="transition: 400ms; opacity: 1; position: absolute;">
        <div class="navbar-container">
          <div von-navbar="active" class="bar bar-header bar-transparent">
            <div class="buttons">
              <router-link to="/">
              <button class="button button-icon">
                <span>
                  <i class="icon ion-ios-arrow-back"></i>
                </span>
              </button>
              </router-link>
            </div>
            <h1 class="title" style="transition: 0ms; transform: translate3d(0px, 0px, 0px); opacity: 1;">
              <span>Fatture</span>
            </h1>
          </div>
        </div>
      </div>

      <div class="page has-navbar">
        <div class="page-content">
          <div class="item item-divider">Contratto numero</div>
          <div class="list list-borderless hl-list list-ios hl-list-borderless">
            <div :key="index" v-for="(fattura,index) in fatture"  class="item item-borderless hl-item item-icon-right">
              <div class="hairline-top"></div>
              <div class="hairline-bottom"></div>
              {{fattura.name}}  /  {{fattura.expiry}}
              <span class="item-note"><span :class="fattura.status"  class="von-badge"><div  class="von-badge-num">{{fattura.status}}</div></span>
              </span>
              <i class="icon ion-ios-arrow-right"></i>
            </div>
          </div>
        </div>
      </div>
    </div>

</template>

<script>
  export default {
    data() {
      return {
        invoicePreview: false,
        invoiceindex: 0,
        fatture: ""
      }
    },
    computed: {
      contratto() {
        return this.$store.state.contratto;
      }
    },
    methods: {
      openInvoice(index) {
        this.invoiceindex = index;
        this.invoicePreview = true;
      }
    },
    mounted: function () {
      console.log(this);
    },
  }

</script>

But this.$store in the template is not defined