Vue.js router-link リロードしないと画面が変わらない

Question

###途中で投げ出すのはやめましょう
回答者も分からないものは分からないと言う素直さも必要です

###解決したいこと

Vue.jsでrouter-linkでerbファイルで実装されているページに遷移しようと思っています
URLは変わるのですが、画面がリロードしないと変わりません
こちらを参照して、TweetIndexPAge.vueに実装してみましたが変わりませんでした
対処法をよろしくお願いします

###ルーティング
Tweetsコントローラーを、apiと通常のコントローラーで分けています

  resources :tweets do
    collection do
      get :search
    end
    resources :comments,only:[:create,:destroy]
    resources :likes,only:[:create,:destroy]
  end

  namespace :api,{format: 'json'} do
    namespace :v1 do
      resources :tweets,only:[:index]
    end
  end

###コントローラー
apiを使用してindexアクションでTweetモデルのレコードを取得しています

class Api::V1::TweetsController < ApiController

  rescue_from ActiveRecord::RecordNotFound do |exception|
    render json: { error: '404 not found' }, status: 404
  end

  def index
    @tweets = Tweet.includes(:user).page(params[:page]).per(5).order("created_at DESC")
    render 'index', formats: 'json', handlers: 'jbuilder'
  end
end

###Jbuilder
Jbuilderでデータの整形を行います

json.array! @tweets do |tweet|
  json.nickname tweet.user.nickname
  json.text  tweet.text
  json.school_a tweet.school_a.name
  json.school_b tweet.school_b.name
  json.title tweet.title_info
  json.id tweet.id
  json.time tweet.created_at.strftime("%Y年%m月%d日 %H時%M分")
end

###index.html.erb
views > tweets > index.html.erb

indexページでjsファイルを読み込み

<%= javascript_pack_tag 'tweet_vue' %>

###tweet_vue.js
app.vueをインポートします

import Vue from 'vue'
import App from '../app.vue'

document.addEventListener('DOMContentLoaded', () => {
  const el = document.body.appendChild(document.createElement('tweet'))
  const app = new Vue({
    el,
    render: h => h(App)
  })
})

TweetIndexPage.vueはindex.html.erbで表示させています
遷移したいページはツイートの詳細ページです
tweets > show.html.erb(/tweets/id)

######----------------------------ここまで追記------------------------------------------

###app.vue
ルートを設定します

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

<script>
import Vue from 'vue'
import VueRouter from 'vue-router'

import TweetIndexPage from 'TweetIndexPage.vue'

const router = new VueRouter({
  mode: 'history',
  routes: [
    {path: '/tweets',
     component: TweetIndexPage}
  ]
})

Vue.use(VueRouter)

export default {
  router
}
</script>

<style scoped>

</style>

###TweetIndexPage.vue

<template>
  <div id="app">
    <div v-for="e in tweets" :key="e.id">
      <div class="article mt-5">
        <router-link :to="`tweets/${e.id}`">  //遷移先へ
        <div class="article-title">
          {{e.school_a}}vs{{e.school_b}}
        </div>
        <div class="article-image">
          <i class="fa fa-baseball-ball text-white"></i>
        </div>
        <div class="sub-title">
          {{e.title}}
        </div>
        <div class="name">
          投稿者 {{e.nickname}}
        </div>
        <div class="tweets_at">
          {{e.time}}
        </div>
        </router-link>
      </div>
    </div>
  </div>
</template>
<script>
import axios from 'axios';

export default {
  data: function() {
    return {
      tweets: []
    }
  },
  mounted() {
    axios
    .get('/api/v1/tweets.json')
    .then(response => (this.tweets = response.data))
  },
  beforeRouteUpdate (to, from, next) {
    const url = this.makeUrl(this.baseUrl, to.query);
    this.fetchUserList(url);
    next();
  },
}
</script>

</style>

Comments

[plasticgrammer]

この２つのソースからでは、どのアクションで発生する問題なのかがわかりません。
もう少し補足もしくは別ソースの追記をお願いします。

また、追加で確認ですが、TweetIndexPageにあるmakeUrlやfetchUserListは
どこで定義されているものでしょうか？

[Meitoku]

依頼ありがとうございます
処理の流れを追記しました

makeUrlやfetchUserListは意味がよく分からず貼り付けていたので定義していませんでした
申し訳ありません

[Meitoku]

遷移先のページはVue.jsを一切使っていないのですが、これが原因なのでしょうか？

[plasticgrammer]

遷移前も遷移先もTweetIndexPageコンポーネントで表示という理解で正しいでしょうか。
だとすると、遷移時にはmountedが実行されないからかもしれません。
データの取得をbeforeUpdateやroute変更時などに変えてみれば上手くいくかも。

参考）
https://jp.vuejs.org/v2/guide/instance.html#%E3%83%A9%E3%82%A4%E3%83%95%E3%82%B5%E3%82%A4%E3%82%AF%E3%83%AB%E3%83%80%E3%82%A4%E3%82%A2%E3%82%B0%E3%83%A9%E3%83%A0

[Meitoku]

遷移先はHTML + Railsのみで構成されています
Vue.jsの<template>の中に記述しているわけでなく、show.html.erbのファイルのみで作成しています
router-linkは遷移先もコンポーネント化？しなければならないのでしょうか

Answer 1

Vueではrouter-linkしか使えないと思っていました
普通のerbファイルに移動するなら<a href="">を使えばいい
こんな簡単なのに情報量が少ないですね・・・