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

JSON
1[
2    {   
3	"title": "bbbbbbbbbb",
4	"name": "aaaaaaaa",
5        "slug": "abcde"
6    },
7    {   
8	"title": "cccccccccc",
9	"name": "dddddddddd",
10        "slug": "fghijk"
11    }
12]

コード

_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>