Aplicando os conceitos de vue e vuex.

index.vue

<template>
  <h1>O count é: </h1>
  <h3>{{ count }}</h3>
  <button @click="count(2)">Contar</button>
</template>
<script>
import Vue from 'vue';
export default {
  // Computed é uma propriedade do vue que fica observando mudanças no estado
  // Sempre que há mudanças no estado, a variavel em observação é recopilada e é refletida a mudança
  computed: {
    // Variavel definida para ser escutada
    count: {
      // Retorna o valor do estado
      // Observação nunca chamar ou modificar o estado direto, sempre chamar as propriedades do vue
      // Evite fazer isso this.$store.state.count ou this.$store.state.count = 1
      // Sempre use getters e commit
      
      // Propriedade da computada para retornar o valor
      get () {
        // Retorna o valor do estado que esta no metodo getter
        return this.$store.getters.count;
      },
      // Propriedade da computada para modificar o valor
      set (value) {
        // Usa a mutation para alterar o valor do estado
        this.$store.commit('count', value)
      }
    }
  }
}
</script>

propriedades.vue

<script>
import Vue from 'vue';
import FilhoComponent from '../components/FilhoComponent.vue';

export default {
  // Declaração das variaveis globais da aplicação
  // Quando for usadas usar o this, exemplo: this.nome
  data: () => ({
    nome: 'Alex',
    idade: 16,
    ativo: true,
    filiacao: {
      mae: 'Maria',
      pai: 'Jose'
    },
    telefones: [
      '999999999',
      '888888888'
    ]
  }),
  // Declaração de metodos para serem usadas nas funções de clicks
  methods: {
    pegarNome() {
      console.log("nome", this.nome);
    }
  },
  // Computed é uma propriedade do vue que fica observando mudanças no estado
  // Sempre que há mudanças no estado, a variavel em observação é recopilada e é refletida a mudança
  // Uma computed é uma variavel, dessa forma nao pode ter uma declarada com o mesmo nome no data mencionado à cima
  // Recebe dois metodos um get e outro set
  computed: {
    // As maneira de como usar, está declarada no arquivo a cima
    nome_da_computada: {
      get () {}
      set (value) {}
    }
  }
  // Escuta variaveis globais criadas
  // Sempre quando há mudanças na variavel, ele guarda o valor novo e o antigo
  watch: {
    // Nome de uma variavel global ja criada, para ficar ouvindo
    nome(value_novo, value_antigo) {
      // Recebe o valor novo alterado e o valor antigo
      console.log(value_novo, value_antig);
    }
  }
  // Usar outros components em um component pai
  // Importa o component no inicio do script e chama ele nessa propriedade
  components: {
    FilhoComponent
  }
  // Propriedade para ser usada em components
  // Quando tem um component pai que chama varios components filhos
  // É passado props no filho para receber como herança dos pais, pode-se haver 
  // As mesmas propriedades para n filhos
  // Nunca mude o valor de uma props no component filho, apenas no pai
  // Sempre emita eventos para o pai, onde sera modificado
  // Exemplo: para emiti o evento é só usar this.$emit("nome_do_evento", this.nome_da_propriedade_usada);
  // E no pai vc trata assim: <FilhoComponent :nome_da_propriedade_usada="obj" 
  // v-on:nome_do_evento="funcaoNoPaiParaMudarAProp" />
  props: {
    // Exemplo de props passadas do tipo string
    titulo: {
      type: string,
      default: '', 
    },
    // Exemplo de props passadas do tipo number
    numero: {
      type: number,
      default: 0, 
    },
    // Exemplo de props passadas do tipo boolean
    vivo: {
      type: boolean,
      default: true, 
    },
    // Exemplo de props passadas do tipo object
    filho: {
      type: Object,
      default: () => {}
    },
    // Exemplo de props passadas do tipo array
    filhos: {
      type: Object,
      default: () => ({}), 
    },
  },
}
</script>

store.js

import Vue from 'vue';
import Vuex from 'vuex';
import axios from 'axios';

Vue.use(Vuex)

// Gerenciamento de estado da aplicação
// Instanciando Vuex para o vue
const store = new Vuex.Store({
  // Estado inicial da aplicação
  // Defini todos os estados que serão usado na aplicação
  state: {
    token: 'seu_token_criptografado',
    count: 0
  },
  // Mutações que afetaram o estado
  // Usado em situações de pequenas mudanças no estado
  mutations: {
    // Metodo criado para mudar o estado
    // Será usado nos methods ou nas actions
    increment (state, value) {
      // Pega o valor atual do estado e modifica
      state.count += value;
    }
  },
  // Trabalha o valor atual do estado
  getters: {
    // Metodo criado para buscar/trabalhar o estado
    // Será usado nas computed
    count(state) {
      // Retorna o valor do estado
      return state.count;
    }
  },
  // Requisições feitas em apis externas e que pode ou não realizar mudanças no estado atravez do commit,
  // Mas que pode ser chamada em qualquer lugar(actions, pages ou components)
  actions: {
    // Metodo criado para realizar a ação
    // Recebe state, commit e dispatch como parametros não obrigatórios, 
    // Podem ser usados para recuperar, mutar ou efetuar ações no estado.
    
    // O params são parametros tratados nas pages ou components que podem ser usados para mutar o state, 
    // ou ser usado para realizar as consultas externas
    solicitationExtenal({ state, commit, dispatch }, params) {
       // Como será feito uma requisição externa, preciso retornar uma promise
       return new Promise((resolve, reject) => {
        // Realiza uma requisição http usando o axios
        // Essa requisição pode ser feitas em varias pages, com apenas um código
        axios({
          headers: {
            'Authorization': `Bearer ${state.token}`
          },
          url: 'http://localhost:3333/solicitations',
          method: 'GET',
          params: params
        }).then(response => {
          resolve(response)
        }).catch(error => {
          reject(error)
        })
      })
    }
  }
});