JSファイル読み込み方法

erbのファイルからjsファイルを読み込みたいです

app/javascript/packs内のファイルが読み込めません

app/assets/javascript内のファイルは読み込めます

application.jsが2つ存在するので、どう区別をつけたらいいか分かりません

######読み込み元
application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>タイトル</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %> <!--app/assets/javascript内のapplication.js -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
    <% if user_signed_in? %>
      <li>
        <%= link_to "NOTICE", notifications_path, class: "btn-default" %>
      </li>
      <% if unchecked_notifications.any? %>
        <i class="fa fa-circle" style="color: gold;"></i>
      <% end %>
    <% end %>
  </head>
  <body>
    <%= yield %>
  </body>
</html>

#####試したこと

scriptは使えるかどうか、適用させたいファイル(app/views/tops/index.html.erb)で
app/javascript/packs/main.jsを呼び出そうと記述しましたが読み込めませんでした

<script src="/../../javascript/packs/main.js"></script>

##追記

Vue.jsなのですが、現在{{message}}と記述されしまいます
コンソールには以下のエラーです

Failed to load resource: the server responded with a status of 404 (Not Found)

app/javascript/packs/main.js

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue'
  }
})

app/views/tops/index.html.erb

<div id="app">
  {{message}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script>
<script src="../../javascript/packs/main.js"></script>