VueJSとFlowplayerの組み合わせで動画が再生されない

Question

現在、Laravel5+VueJSで動画プレーヤーを作成しようとしています。
Chromeのデベロッパーツールでは、srcに正しくURLが入っているところまでは確認できたのですが、
poster画像が原寸で表示されて、動画の再生ができません。
試しにsrcをJSONで取得できるpathを直接URLに置き換えたところ正しく再生されました。

現在のソースコードでは、Chromeのコンソールでは、【Uncaught TypeError: Cannot read property 'split' of undefined】というエラーが発生しています。
現在のソースコードは以下のとおりです。

<template>
    <div>
        <div class="row">
            <div class="col-md-6">
                <div class="fp-slim flowplayer">
                    <video preload autoplay :poster="video.screenshot">
                        <source type="application/x-mpegurl" :src="video.path">
                    </video>
                </div>
            </div>
            <div class="col-md-6">テスト動画</div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "player-component",
        created() {
            this.fetchVideo();
        },
        data() {
            return {
                video: [],
            }
        },
        methods: {
            // 動画取得
            fetchVideo() {
                axios.get('/api/player/' + this.$route.params.videoId)
                    .then(response => {
                        this.video = response.data
                    })
                    .catch(e => {
                        this.errors.push(e)
                    });
            },
        }
    }
</script>

<style scoped>

</style>

お分かりになる方、ご教授願えれば幸いです。

追記: 2018/01/31

該当のページから別ページに遷移して、ブラウザの戻るボタンで戻ったところ再生されました。
jQueryか何かのイベントが発火していないのでしょうか。

Answer 1

splitがないということから、何かが配列ではないんだなという問題がわかります。
そして、この中で怪しそうなのはvideoが配列で指定しているのに、response.dataを直接入れているところです。
本当にこれは配列ですか？
this.video.push(response.data)で直るかもしれませんね

Comments

[TJMYK]

ご回答ありがとうございます。
幾つかの参考サイトで、[]となっていたので、そのままに実装しておりました。
JSONを見ると{}で括られていたので、{}にしてみましたが、解決しませんでした。
その上で、this.video.push(response.data)にしても変化がありませんでした。
また、[]のままでthis.video.push(response.data)にしてみましが、変化はございませんでした。
すべて、同じエラーメッセージでした。