Vue.js code to update selection on screen
One technique would be to apply fundamentals of event delegation by adding a method to handle all clicks. For instance, an event listener could be added to the root element (or one if child its child nodes, like a &lt;table&gt;)

mounted: function() {
    this.$el.addEventListener('click', this.clickHandler);
}


Then have the method accept the click event argument:

clickHandler(clickEvent){


That method could check if the target of the event was a table cell by checking the tagName attribute (for TD). To restrict to only certain table cells, add a class attribute - e.g. team. If that class is found in the target element's classList, set the team property to the innerHTML of the target.

clickHandler(clickEvent){
    const target = clickEvent.target;
    if (target.tagName == 'TD' &amp;&amp; target.classList.contains('team')) {
        this.team = target.innerHTML;
    }
}


See a demonstration in the sample below. Notice how there is now a clean separation of the event handling logic (JS) and the markup for display (HTML).



new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!',
    team: ''
  },
  mounted: function() {
    this.$el.addEventListener('click', this.clickHandler);
  },
  methods: {
    clickHandler(clickEvent) {
      const target = clickEvent.target;
      if (target.tagName == 'TD' &amp;&amp; target.classList.contains('team')) {
        this.team = target.innerHTML;
      }
    }
  }
})
&lt;script src="https://unpkg.com/vue"&gt;&lt;/script&gt;

&lt;div id="app"&gt;
  &lt;p&gt;Selected Team: {{ team }}&lt;/p&gt;
  &lt;table&gt;
    &lt;tr&gt;
      &lt;td class="team"&gt;WHU&lt;/td&gt;
      &lt;td&gt;20 Oct&lt;/td&gt;
      &lt;td class="team"&gt;BHA&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td class="team"&gt;CHE&lt;/td&gt;
      &lt;td&gt;21 Oct&lt;/td&gt;
      &lt;td&gt;WAT&lt;/td&gt;
    &lt;/tr&gt;

  &lt;/table&gt;
&lt;/div&gt;