title: How to watch for changes automatically in a API Endpoint with Vue?
body: <p>I’m building an app that uses <strong><a href="https://api.stackexchange.com/docs">Stackoverflow’s API</a></strong> to get the <em><strong>last question</strong></em> of a <em><strong>certain tag</strong></em> &amp; ouput it on my app. I have been able to get the <em><strong>last question</strong></em> on the <em><strong>specific tag</strong></em>, but now I want that <em><strong>automatically detect changes</strong></em> in the <em><strong>API Endpoint</strong></em> &amp; fetch the last question posted without refreshing the browser or calling the function. I have tried with <strong><a href="https://v2.vuejs.org/v2/guide/computed.html" rel="nofollow noreferrer">Computed Properties &amp; Watchers</a></strong>, but I haven’t got it to work. I might be doing it wrong or my solution is not the right approach.</p>
  <p>This is my <strong>code snippet</strong>:</p>
  <pre><code>&lt;template&gt;
    &lt;div class=&quot;question container-fluid&quot;&gt;
      &lt;h1 class=&quot;my-3&quot;
      &gt;
      Last &quot;&lt;span class=&quot;question_tag&quot;&gt;{{ tag }}&lt;/span&gt;&quot; Question Details
      &lt;/h1&gt;
      &lt;b-form
        class=&quot;my-4&quot; 
        @submit.prevent=&quot;updateTag&quot;
      &gt;
        &lt;b-form-input
          class=&quot;w-auto&quot;
          placeholder=&quot;Enter a stackoverflow tag&quot;
          type=&quot;text&quot;
          v-model=&quot;newTag&quot;
        &gt;
        &lt;/b-form-input&gt;
      &lt;/b-form&gt;
      &lt;div class=&quot;question_title my-2&quot;&gt;
        &lt;strong&gt;Title: &lt;/strong&gt; &lt;span&gt;{{ details.title }}&lt;/span&gt;
      &lt;/div&gt;
      &lt;div class=&quot;question_status my-2&quot;&gt;
        &lt;strong&gt;Question answered: &lt;/strong&gt;&lt;span&gt;{{ details.is_answered }}&lt;/span&gt;
      &lt;/div&gt;
      &lt;div class=&quot;question_views my-2&quot;&gt;
        &lt;strong&gt;Views: &lt;/strong&gt;&lt;span&gt;{{ details.view_count }}&lt;/span&gt;
      &lt;/div&gt;
      &lt;div class=&quot;question_answers my-2&quot;&gt;
        &lt;strong&gt;Answers Count: &lt;/strong&gt;&lt;span&gt;{{ details.answer_count }}&lt;/span&gt;
      &lt;/div&gt;
      &lt;div class=&quot;question_link my-2&quot;&gt;
        &lt;strong&gt;Check question: &lt;/strong&gt;
        &lt;a :href=&quot;details.link&quot;
        :title=&quot;details.link&quot;
        rel=&quot;noopener&quot;
        target=&quot;_blank&quot;
        &gt;
          Here
        &lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import axios from 'axios'
  
  export default {
    name: 'QuestionInfo',
    data(){
      return {
        details: '',
        tag: `phaser-framework`,
        newTag: ''
      }
    },
    mounted() {
      this.getTag()
    },
    methods: {
      getTag(){
        axios.get(`https://api.stackexchange.com//2.2/questions?order=desc&amp;sort=creation&amp;tagged=${this.tag}&amp;site=stackoverflow`).then(response =&gt; {
          this.details = response.data.items[0]
          // console.log an error if get() method is unsuccessful
        }).catch(err =&gt; {
          console.log(err)
        })
      },
      updateTag() {
        this.tag = this.newTag
        this.getTag();
      },
    },
  }
  &lt;/script&gt;
  </code></pre>
  <p><strong>EDIT:</strong></p>
  <p>I would like to find a Client Side solution... preferably a <strong><a href="https://vuejs.org/" rel="nofollow noreferrer">Vue</a></strong> Solution if there is any. I would like to avoid as much as possible a Server Side Solution for this feature.</p>