Why does event hooking fail and break the Vue component altogether?

Question

Vue.js

A small project, so the assembler is not needed - I include the vue script, I include the script with the Vue instance before body. You need to create a component and pass data to it, and also in the component to impose an event on a click and a handler for this event.
But when I write @click="delete" to the component on the div, nothing happens and the component does not appear on the page at all. Where is the mistake?
Here is the js file

const contentTemplate = `<div @click="delete" class="info-content-wrapper">{{tit}}</div>`;

Vue.component('info-content', {
  data: function(){
    return {
      title: 'wwwww'
    }
  },
  props: {
    tit: String
  },
  methods: {
    delete(){
      this.title = "aga shas"
    }
  },
  template: contentTemplate
});


new Vue({
  el: '#root',
  data: {
    test: 'qwewerwere'
  },
  methods: {

  },
  components: {

  }
});

Here is where I use in html

<div class="info-page-wrapper">
          <info-content tit="qwqwqwqwq"></info-content>
</div>

Answer 1

delete rename to remove
https://github.com/vuejs/vue/issues/4966#issuecomm...