title: Vue Uncaught TypeError: fn.bind is not a function
body: <p>My App.vue looks as follows</p>
  
  <pre><code>&lt;template&gt;
    &lt;div id="app"&gt;
      &lt;home-central&gt;&lt;/home-central&gt;
    &lt;/div&gt;
  
  &lt;/template&gt;
  
  &lt;script&gt;
  import HomeCentral from './components/HomeCentral';
  
  export default {
    name: 'App',
    components: {
      HomeCentral,
    },
  };
  &lt;/script&gt;
  &lt;style&gt;
  #app {
    font-family: "Avenir", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }
  &lt;/style&gt;
  </code></pre>
  
  <p>I have the following code in src/components/HomeCentral.vue</p>
  
  <pre><code>&lt;template&gt;
      &lt;div class="homecentral"&gt;
          &lt;input type="text" v-model="title"&gt;&lt;br/&gt;
          &lt;h1&gt;{{title}}&lt;/h1&gt;
          &lt;p v-if="showName"&gt;{{user.first_name}}&lt;/p&gt;
          &lt;p v-else&gt;Nobody&lt;/p&gt;
          &lt;ul&gt;
              &lt;li v-for="item in items" :key="item.id"&gt;{{item.title}}&lt;/li&gt;it
          &lt;/ul&gt;
          &lt;button v-on:click="greet('Hello World')"&gt;Say Greeting&lt;/button&gt;
          &lt;br/&gt;
          &lt;input type="text" v-on:keyup="pressKey" v-on:keyup.enter="enterHit"&gt;
          &lt;label&gt;First Name: &lt;/label&gt;&lt;input type="text" v-model="user.firstName"&gt;
          &lt;br/&gt;
          &lt;label&gt;Last Name: &lt;/label&gt;&lt;input type="text" v-model="user.lastName"&gt;
          &lt;h3&gt;&lt;/h3&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    name: 'HomeCentral',
    data() {
      return {
        title: 'Welcome',
        user: {
          firstName: 'John',
          lastName: 'Doe',
        },
        showName: true,
        items: [
            { title: 'Item One' },
            { title: 'Item Two' },
            { title: 'Item Three' },
        ],
      };
    },
    methods: {
      greet: function (greeting) {
        alert(greeting);
      },
      pressKey: function (e){
        console.log('pressed' + e.target.value);
      },
      enterHit() {
        console.log('You hit enter');
      },
      computed: {
        fullName: function() {
          return this.user.firstName + ' ' + this.user.lastName;
        }
      },
    },
  };
  &lt;/script&gt;
  
  &lt;style scoped&gt;
  
  &lt;/style&gt;
  </code></pre>
  
  <p>This throws the following error :</p>
  
  <pre><code>vue.runtime.esm.js?ff9b:205 Uncaught TypeError: fn.bind is not a function
      at nativeBind (vue.runtime.esm.js?ff9b:205)
      at initMethods (vue.runtime.esm.js?ff9b:3537)
      at initState (vue.runtime.esm.js?ff9b:3305)
      at VueComponent.Vue._init (vue.runtime.esm.js?ff9b:4624)
      at new VueComponent (vue.runtime.esm.js?ff9b:4794)
      at createComponentInstanceForVnode (vue.runtime.esm.js?ff9b:4306)
      at init (vue.runtime.esm.js?ff9b:4127)
      at createComponent (vue.runtime.esm.js?ff9b:5604)
      at createElm (vue.runtime.esm.js?ff9b:5551)
      at createChildren (vue.runtime.esm.js?ff9b:5678)
  </code></pre>
  
  <p>Things start to work fine if I remove the computed block :</p>
  
  <pre><code>computed: {
    fullName: function() {
      return this.user.firstName + ' ' + this.user.lastName;
    }
  },
  </code></pre>
  
  <p>Please help me figure out what I'm doing wrong.</p>