Vue.js: why is prettySchedule not a function?

Question

Given this Vue instance:

import Vue from 'vue'
import VueResource from 'vue-resource'
import * as moment from 'moment'

var schedule = new Vue({
    el: '#schedule',
    template: '<table class="table"> \
      <tr> \
        <th>Document</th> \
        <th>User</th> \
        <th>Scheduled for</th> \
        <th>Status</th> \
      </tr> \
      <tr v-for="job in jobs" :key="job.id"> \
        <td>{{ job.document_id }}</td> \
        <td>{{ job.user_id }}</td> \
        <td>{{ this.prettySchedule(job.schedule) }}</td> \
        <td>{{ job.status }}</td> \
      </tr> \
        </table>',
    data: {
      jobs: []
    },
    mounted() {
      this.get()
    },
    methods: {
      get: function () {
        this.$http.get('/scheduled_jobs/list')
            .then(response => {
              this.jobs = response.body
            })
      },
      prettySchedule: function (timeString) {
        return moment(timeString).format("dddd, MMMM Do YYYY, h:mm:ss a")
      }
    }
})

Why do I get this error in the console?

[Vue warn]: Error in render: "TypeError: this.prettySchedule is not a function"

(found in <Root>)

Answer 1

try to replace

{{ this.prettySchedule(job.schedule) }}

with

{{ prettySchedule(job.schedule) }}