title: Vue, TypeScript Can't Call Component Methods
body: <p>I'm still pretty new to Vue and I'm having troubles working this out. From all the code examples I can find, my code looks like it should work.</p>
  
  <p>I have defined a component like this:</p>
  
  <pre><code>&lt;template&gt;
      &lt;div class="row"&gt;
          &lt;div id="site-header"&gt;
              &lt;img v-bind:src="headerImgUrl" alt="hero-image"&gt;
              &lt;div class="hero-text strokeme"&gt;Some Hero Text&lt;/div&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script lang="ts"&gt;
      import { Component, Vue } from 'vue-property-decorator';
  
      const bgimages = [
          { url: require('../assets/hero/hero1.png') },
          { url: require('../assets/hero/hero2.png') },
          { url: require('../assets/hero/hero3.png') },
          { url: require('../assets/hero/hero4.png') },
          { url: require('../assets/hero/hero5.png') },
          { url: require('../assets/hero/hero6.png') },
          { url: require('../assets/hero/hero7.png') },
          { url: require('../assets/hero/hero8.png') },
          { url: require('../assets/hero/hero9.png') },
          { url: require('../assets/hero/hero10.png') },
          { url: require('../assets/hero/hero11.png') },
          { url: require('../assets/hero/hero12.png') },
          { url: require('../assets/hero/hero13.png') },
          { url: require('../assets/hero/hero14.png') },
      ];
  
      @Component({
          data() {
              console.log(this.getHeaderImageUrl());
              return {
                  headerImgUrl: bgimages[0].url,
              };
          },
          methods: {
              getHeaderImageUrl(): string {
                  const min = Math.ceil(1);
                  const max = Math.floor(14);
                  const i = Math.floor(Math.random() * (max - min + 1)) + min;
                  return bgimages[i].url;
              },
          },
      })
      export default class Home extends Vue { }
  &lt;/script&gt;
  
  &lt;style lang="scss"&gt;
      #site-header {
          position: relative;
          margin-bottom: 2em;
      }
      .hero-text {
          font-family: 'Patua One', cursive;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          font-size: 6em;
          font-weight: 800;
          text-align: center;
          color: #000;
      }
      .strokeme {
          text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
      }
  &lt;/style&gt;
  </code></pre>
  
  <p>However, when compiling I get the error:</p>
  
  <blockquote>
    <p>Error TS2339  (TS) Property 'getHeaderImageUrl' does not exist on type
    'Vue'.</p>
  </blockquote>
  
  <p>How can I set this up so it can call it's own methods?  Also is there a better approach to get a random url into an image source?</p>
  
  <p>Alternatively, how would I update the <code>data.headerImgUrl</code> from inside the <code>getHeaderImageUrl()</code> method?</p>
  
  <p>If I try this:</p>
  
  <pre><code>methods: {
      getHeaderImageUrl() {
          const min = Math.ceil(1);
          const max = Math.floor(14);
          const i = Math.floor(Math.random() * (max - min + 1)) + min;
          //return bgimages[i].url;
          this.headerImgUrl = bgimages[i].url;
      },
  },
  </code></pre>
  
  <p>It errors with:</p>
  
  <blockquote>
    <p>Error TS2339  (TS) Property 'headerImgUrl' does not exist on type
    'Vue'.</p>
  </blockquote>
  
  <p>I'm clearly still not getting the scoping on something or have configured something wrong as this seem to be really basic stuff.</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>So I've re-written my component like this:</p>
  
  <pre><code>&lt;template&gt;
      &lt;div class="row"&gt;
          &lt;div id="site-header"&gt;
              &lt;img v-bind:src="headerImgUrl" alt="hero-image"&gt;
              &lt;div class="hero-text strokeme"&gt;Some Hero Text&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script lang="ts"&gt;
      import Vue from 'vue';
  
      const bgimages = [
          { url: require('../assets/hero/hero1.png') },
          { url: require('../assets/hero/hero2.png') },
          { url: require('../assets/hero/hero3.png') },
          { url: require('../assets/hero/hero4.png') },
          { url: require('../assets/hero/hero5.png') },
          { url: require('../assets/hero/hero6.png') },
          { url: require('../assets/hero/hero7.png') },
          { url: require('../assets/hero/hero8.png') },
          { url: require('../assets/hero/hero9.png') },
          { url: require('../assets/hero/hero10.png') },
          { url: require('../assets/hero/hero11.png') },
          { url: require('../assets/hero/hero12.png') },
          { url: require('../assets/hero/hero13.png') },
          { url: require('../assets/hero/hero14.png') },
      ];
  
      export default Vue.extend({
          computed: {
              headerImgUrl() {
                  return this.getHeaderImageUrl();
              },
          },
          methods: {
              getHeaderImageUrl() {
                  const min = Math.ceil(1);
                  const max = Math.floor(14);
                  const i = Math.floor(Math.random() * (max - min + 1)) + min;
                  console.log(1);
                  return bgimages[i].url;
              },
          },
      });
  
  &lt;/script&gt;
  
  &lt;style lang="scss"&gt;
  ...
  &lt;/style&gt;
  </code></pre>
  
  <p>But I'm still getting an error where the method is inaccessible:</p>
  
  <blockquote>
    <p>Error TS2339  (TS) Property 'getHeaderImageUrl' does not exist on type
    'CombinedVueInstance>>'.</p>
  </blockquote>