Nuxt.jsでslugに応じたコンテンツを表示する際のエラー／リロード又はURL直打ちでエラー

実現したいこと

slugの値に応じたコンテンツを表示を実現するため、発生している問題を解決したい。

発生している問題

index.vue（＝localhost:3000）にアクセスし、/contents/abcdeのリンクをクリックすると、コンテンツが正常に表示されます。正常に表示されるというのは、_slug.vueの{{ filteredData.title }}がbbbbbbbbbbと表示されるということを意味します。

しかしながら、URLを直に打つか、リロードすると"Cannot read property '0' of undefined"というエラーになります。

URLを直に打つか、リロードしても正常に表示されるようにしたいです。

前提

＜ファイル構成＞

pages/
--| contents/
-----| _slug.vue
index.vue
static/
--| data.json

＜取得するデータについて＞

static/data.json

 [
    {   
    "title": "bbbbbbbbbb",
    "name": "aaaaaaaa",
        "slug": "abcde"
    },
    {   
    "title": "cccccccccc",
    "name": "dddddddddd",
        "slug": "fghijk"
    }
]

コード

_slug.vue

<template>
    <div>
        {{ filteredData.title }}
    </div>
</template>

<script>
import mydata from '~/static/data.json' 

export default {

    data () { 
        return {
            mydata: mydata     
        }

    },
    computed: { 
        filteredData: function () {
             if (process.browser) { 

                var url = window.location.protocol+ '//' + window.location.host + '/contents/' 
                var matchData = this.mydata.filter(function(item, index){
                    if (item.slug === window.location.href.replace(url, '')) return true;
                })
            }
            return matchData[0]
        }

    }
}
</script>

index.vue

<template>
 <div>
  <b-button type="button"  to="/contents/abcde">View</b-button>
  <b-button type="button"  to="/contents/fghijk">View</b-button>
 </div>
</template>

<script></script>