title: Why am I getting undefined is not an object error in vue js
body: <p>So I have a vue app I wrote on a single page .html being served by django made up of a a couple components.  I am now trying to transfer this work into a real vue.js project using the Vue CLI and I figured it would be pretty trivial to move my components from the django .html page into single file vue components.  Unfortunately pretty much every line within my single file component is throwing errors (despite my entire app and all its components working in the .html) and I'm having a real rough time figuring this out.  It seems as though transitioning from a vue component to a single file component requires some work.</p>
  
  <p>The current error I'm getting is this:</p>
  
  <pre><code>[Vue warn]: Error in render: "TypeError: undefined is not an object (evaluating 'this.milliseconds = parseInt(duration % 1000 / 100)')"
  </code></pre>
  
  <p>For reasons that aren't entirely clear to me, as soon as I moved to single file component using vue CLI - every line errored out until I added 'this' before every variable.  I have very little understanding of why I would need to use 'this' in a filter method, but when I remove it I get:</p>
  
  <pre><code>[Vue warn]: Error in render: "ReferenceError: Can't find variable: milliseconds"
  </code></pre>
  
  <p>single file component:</p>
  
  <pre><code>&lt;template&gt;
    &lt;div emptyDiv&gt;
      &lt;h3&gt; Stages &lt;/h3&gt;
      &lt;table :style="tableStyle"&gt;
        &lt;tbody&gt;
          &lt;template v-for="item in jobs"&gt;
            &lt;tr&gt;
              &lt;td v-for="stage_execution in item.stage_execution" :title="stage_execution.exec_node.name" :key="stage_execution.stage.name"&gt;
                &lt;b&gt;&lt;a :href="item.mongo_link + stage_execution.stage.name + '.txt'" style="color:black"&gt;{{ stage_execution.stage.name }}&lt;/a&gt;&lt;/b&gt;
                &lt;br&gt;
                {{ stage_execution.duration_millis | durationReadable  }}
                &lt;br&gt;
                {{ stage_execution.status.name }}
              &lt;/td&gt;
            &lt;/tr&gt;
          &lt;/template&gt;
        &lt;/tbody&gt;
      &lt;/table&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import moment from 'moment';
  
  export default {
    data() {
      return {
        jobs: []
      }
    },
    computed: {
      tableStyle() {
        return {
          'background-color': '#f9f9f9',
          'border-color': '#C0C0C0',
          'padding': '8px',
          'width': '100%',
        };
      },
      emptyDiv() {
        return {
          'display': 'contents',
        };
      },
    },
    methods: {
      calculateDuration: function(time_start, time_end) {
        this.theDuration = moment.duration(time_end.diff(time_start))
        if (this.theDuration.seconds() == 0) {
          this.cleanDuration = "N/A"
        }
        else {
          this.cleanDuration = this.theDuration.hours() + " hrs " + this.theDuration.minutes() + " min " + this.theDuration.seconds() + " sec"
        }
        return this.cleanDuration
      }
    },
    filters: {
      durationReadable: function(duration) {
        console.log(parseInt(duration%1000)/100)   //this successfully logs the correct duration
        this.milliseconds = parseInt((duration%1000)/100)
        this.seconds = parseInt((duration/1000)%60)
        this.minutes = parseInt((duration/(1000*60))%60)
        if (this.minutes &lt; 10) {
          this.minutes = '0' + this.minutes
        }
        if (this.seconds &lt; 10){
          this.seconds = '0' + this.seconds
        }
        return this.minutes + " m " + this.seconds + " s " + this.milliseconds + ' ms'
      }
    },
    created() {
      this.binariesEndpoint = 'test.com'
      fetch(this.binariesEndpoint)
      .then(response =&gt; response.json())
      .then(body =&gt; {
        this.cleanStartTime = moment(body[0].time_start)
        console.log(body[0].time_start)
        this.cleanEndTime = moment(body[0].time_end)
        this.cleanDuration = this.calculateDuration(this.cleanStartTime, this.cleanEndTime)
        this.job_execs.push({
          'name': body[0].job.name,
          'build_id': body[0].build_id,
          'env': body[0].job.env,
          'time_start': this.cleanStartTime.format('LLL'),
          'time_end': this.cleanEndTime.format('LLL'),
          'duration': this.cleanDuration,
        })
      console.log(body[0].job.name)
      })
      .catch( err =&gt; {
        console.log('Error Fetching:', this.binariesEndpoint, err);
        return { 'failure': this.binariesEndpoint, 'reason': err };
      })
    },
  };
  &lt;/script&gt;
  </code></pre>
  
  <p>note: the log statement in durationReadable filter correctly logs the duration.</p>