[Vuejs]-Can't use Vuex to store the method function

Here is working code for home and temperature components with store. you can modify other components in similar way.
https://github.com/manojkmishra/weather_app_vuex_test
https://weather-app-vuex-test.netlify.app/

store.js

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

Vue.use(Vuex);
export default new Vuex.Store({
state: { weather:{},    },
 actions:{
    async currentCity ({commit}, position)
    {   let url_base= 'https://api.openweathermap.org/data/2.5/';
        let api_key= 'c9f562aaffcdefaf40f2ed808d202c9b';
        console.log('store-pos',position,url_base,api_key)
        let res=await   
axios.get(`${url_base}weather?&lat=${position.coords.latitude}&lon=${
            position.coords.longitude}&units=metric&APPID=${api_key}`)
            commit('CUR_CITY',res.data)
        return res;
    },
 },
 mutations:{
     CUR_CITY (state, weather)
     {   console.log('store-muta-state=',state)
         state.weather = weather

     }
 },
 getters:{}
})

home.js

import 'chartjs-plugin-datalabels';
import Temperature from '../temperature/Temperature.vue';
import { mapState} from 'vuex';
import '../../custom.scss';

export default {
computed: 
{  ...mapState({ weather: state => state.weather, 
                }),
},
components: {Temperature},
mounted() {
    navigator.geolocation.getCurrentPosition((position) => 
    {
        this.$store.dispatch('currentCity', position)
    });
},
};

temperature.js

export default {
name: 'temperature',
components: {},
props: [ 'weather' ],
data() {
return{
    isShown: false,
        query: '',
        icons: {
            'Rain': require('../../assets/regnerisch.png'),
            'Clear': require('../../assets/sonne.png'),
            'Clouds': require('../../assets/wolkig.png'),
            'Snow': require('../../assets/schnee.png'),
            'Drizzle':require('../../assets/regnerisch.png'),
            'Thunderstorm':require('../../assets/regnerisch.png')
        }
}
},
}

home.vue

<template>
<b-container fluid >
<!--Navbar-->
 <div class="row d-flex justify-content-between menu-leiste">
 <b-button v-b-toggle.sidebar-left style="background:transparent; 
 border:none">
    <img src="@/assets/menu_button.png" class="menu-button" />
  </b-button>
   <div class="city" v-if="typeof weather.main !='undefined'">
    <strong>{{ weather.name }}</strong>
  </div>
  <b-button v-b-toggle.sidebar-right style="background:transparent; 
 border:none">
    <img src="@/assets/suchen.png" class="suchen" />
  </b-button>
</div>
<!-- sidebar left-->
<b-sidebar id="sidebar-left" title="WEATHER" shadow bg-variant="black" text-
 variant="white">
  <div class="px-3 py-2">
    <router-link to="/">
      <p id="first-line">
 <img src="@/assets/wetter_setting.png" class="wetter-setting-icon"/>Wetter
      </p>
    </router-link>
    <hr style="background-color:white" class="hr" />
    <router-link to="/about">
 <p><img src="@/assets/information.png" class="info-icon" />Über diesen App
      </p>
    </router-link>
    <hr style="background-color:white" class="hr" />
  </div>
 </b-sidebar>
 <!--sidebar right-->
 <b-sidebar id="sidebar-right" right shadow bg-variant="black"
  img src="@/assets/suchen.png" text-variant="white" >
  <div slot="title">
    <img src="@/assets/suchen.png" class="search-icon" />
  </div>
  <div class="px-3 py-2">
    <img src="@/assets/close_white.png" class="close-white-icon"    
 @click="removeType()" />
    <hr style="background-color:white" class="hr2" />
  </div>
</b-sidebar>
<p><strong><div class="row heute">Heute</div></strong></p>
<Temperature  :weather="weather"></Temperature>
<p><strong> <div class="row heute">Nächste 5 Tage</div> </strong></p>

</b-container>
</template>

<script src="./home.js"></script>
<style src="./home.scss" scoped lang="scss"></style>