Событие, смонтированное Vue, не является "рабочим"

Я пытаюсь создать страницу, где переменная должна быть установлена ??сразу после загрузки страницы. Я поместил свой метод и попытался отлаживать его повторно без каких-либо результатов, тогда я попытался просто напечатать строку на консоли, mountedи ничего не произошло ... Я не уверен, что я что-то упустил.

Я подниму свой проект usnig Vue CLI и на данный момент, в следующем коде, мне нужно вставить изменения в HelloWorld.vueшаблон из шаблона

Я также добавил кнопку в качестве чека,

      <button onclick="foo">foo</button>

раздел сценария страницы выглядит следующим образом:

  <script>
export default {
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    mounted: function() {
      console.log("Mounted!")
    },
    foo: function() {
      console.log("button")
    }
  }
}
</script>

ожидаемое поведение - «установить»! на консоли при сохранении и обновлении, и «кнопку» всякий раз, когда я нажимаю кнопку. Я ничего не вижу, когда отображается страница, и появляется только «кнопка», когда я нажимаю кнопку. Является ли mountedнеправильная функция использовать здесь или я упускаю что - то другое?