[Vue]TypeError: Cannot read property 'ref' of undefinedが解決できません[Nuxt]

Nuxt.js初学者で技術書やネット記事を参考にしながらアプリを作っています。

https://note.com/kawa1228/n/n9687ceb3152d

上記の記事を基にfirebaseを使い画像とテキストを投稿する機能を実装しようとしているのですが

TypeError: Cannot read property 'ref' of undefined

というエラーが発生し画像とテキストをデータベース(firebase)に保存できないという状況に陥っています。

該当のソースコード

**app/posts/pages/new.vue**
<template>
<div class="post-wrapper">
  <div class="post-title">
    <h2>投稿ページ</h2>
  </div>

 <div class="post-name-wrapper">
   <input type="text" class="post-name" v-model="p_name"  placeholder="選手の名前" />
 </div>

 <div class="post-text-wrapper">
   <textarea class="post-text" v-model="body" placeholder="コメント"/>
 </div>

 <div class="post-image-wrapper">
    <img v-if="preview" src="preview"/>
    <input type="file" accept="image/png,image/jpeg" @change="previewImage"/>
  </div>

 <div class="post-btn-wrapper">
   <button class="post-btn" @click="postContents">投稿</button>
 </div>
</div>



</template>

<script>

export default {
  data() {
  return  {
   file: null,
   preview: '',
   fileName: '',
   body: '',
   p_name:'',
  }
 },

  methods: {
    previewImage(e) {
    const file = e.target.files[0];
    this.file = file
    const reader = new FileReader()
     reader.onload = (e) => {
       this.preview = e.target.result
       this.fileName = file.name
     }
     reader.readAsDataURL(file)
},

   async postContents() {
     const d = new Date()
     const today = d.toLocaleDateString()

     const contents = {
       note: {
         created_at: today,
         title: this.title,
         p_name:this.p_name,
         body: this.body,
       },
       image: {
         file: this.file,
         name: this.fileName
       }
     }
     await this.$store.dispatch('postContents', contents)
     console.log('load finish') // dataをclearにする
   }
 }
}

</script>

<style>
.post-title h2 {
font-size: 28px;
}

.post-name-wrapper {
margin-top: 20px;
}

.post-name {
width: 300px;
background-color: #ffff;
border: 1px solid ;
height: 25px;
}

.post-image-wrapper {
display: flex;
flex-direction: column;
}

.post-text-wrapper {
display: flex;
flex-direction: column;
margin: 10px 0 10px 0;
}

.post-text {
width: 500px;
height: 200px;
background-color: #ffff;
border: 1px solid ;
}

.post-image-wrapper {
  margin: 10px 0;
  width: 300px;
}

.post-btn-wrapper {
  display: inline-block;
}

.post-btn {
padding: 10px 50px;
background-color: #ffff;
border: solid 1px;
}
</style>

**app/store/index.js**
import { auth ,storage, db } from '~/plugins/firebase'

export const strict = false

export const state = () => ({
    user: null,
})

export const mutations = {
    setUser(state, payload) {
        state.user = payload
    }
}

export const actions = {
    signUp({ commit }, { email, password }) {
        return auth().createUserWithEmailAndPassword(email, password)
    },

    signInWithEmail({ commit }, { email, password }) {
        return auth().signInWithEmailAndPassword(email, password)
    },

    signInWithGoogle({ commit }){
        return auth().signInWithPopup(new auth.GoogleAuthProvider())
    },

    signOut() {
        return auth().signOut()
    },

    // 投稿機能（仮）始まり
    async postContent(context, payload) {
        const contents = payload
        const loadImage = await context.dispatch('uploadImage', {
          name: contents.image.name,
          file: contents.image.file
        })
        contents.image = loadImage

        const articlesRef = db.collection('articles')
        await articlesRef.add(contents)
    },


    uploadImage(context, payload) {
        if (!payload.file) {
          return {
            name: 'サンプル画像',
            src: 'https://placehold.jp/150x150.png'
          }
        }
        const storageRef = storage.ref()

        return new Promise((resolve, reject) => {
          storageRef
            .child(`images/${payload.name}`)
            .put(payload.file)
            .then((snapshot) => {
              snapshot.ref.getDownloadURL().then((url) => {
                resolve({ name: payload.name, src: url })
              })
            })
            .catch((err) => {
              console.log('画像投稿エラー', err)
            })
        })
      }
    // 投稿機能（仮）終わり
}

export const getters = {
    user(state){
        return state.user
    },
    isAuthenticated (state) {
        return !!state.user
    }
}