title: Vue.js + socket.io how to update props
body: <p>So this is my user list component for Vue. Socket.io returns a list of currently active users for example [{name:Fluxed,rank:Admin}] and I want it to auto-update the element. How can I update the prop element then make it show a change?</p>
  <p>Here is my code</p>
  <pre><code>&lt;template&gt;
    &lt;div id=&quot;app&quot;&gt;
      &lt;div&gt;
      &lt;div style=&quot;float:right;width:30%;border-left:1px solid black;padding:1%;&quot;&gt;
        &lt;b&gt;Users&lt;/b&gt;
        &lt;b-list-group style=&quot;max-width: 300px;&quot; &gt;
          &lt;b-list-group-item class=&quot;align-items-center&quot; v-for=&quot;value in userList2&quot; v-bind:key=&quot;value.name&quot; &gt;
            &lt;b-avatar class=&quot;mr-3&quot;&gt;&lt;/b-avatar&gt;
            &lt;span class=&quot;mr-auto&quot;&gt;{{ value.name }}&lt;/span&gt;
            &lt;b-badge&gt;{{ value.rank }}&lt;/b-badge&gt;
          &lt;/b-list-group-item&gt;
        &lt;/b-list-group&gt;
        &lt;ul class=&quot;list-group&quot;&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js&quot;&gt;&lt;/script&gt;
  
  &lt;script&gt;
  import io from 'socket.io-client';
  import $ from 'jquery'
  var socket = io('http://localhost:4000');
  socket.on('update', function (users){
        this.userList = users;
        console.log(this.userList)
  }) 
  import VueJwtDecode from &quot;vue-jwt-decode&quot;;
  export default {
    
    name: 'app',
    props: {
      userList2: {
        type: Array,
        default: () =&gt; []
      }
    },
    data() {
      
      return {
        user: {},
        componentKey: 0,
        userList: this.userList2,
        
      };
    },
    
    created () {
      // get socket somehow
      socket.on('update', function (users){
        console.log(this.userList)
        this.userList = users;
        console.log(this.userList)
      }) 
    },
    methods: {
      async getUserDetails() {
        let token = localStorage.getItem(&quot;jwt&quot;);
        let decoded = VueJwtDecode.decode(token);
        let response = await this.$http.post(&quot;/update&quot;, decoded);
        let urank = response.data.rank;
        this.user = decoded;
        this.user.rank = urank;
      },
      logUserOut() {
        localStorage.removeItem(&quot;jwt&quot;);
        this.$router.push(&quot;/&quot;);
      },
      
    },
  }
  &lt;/script&gt;
  </code></pre>
  <p>How can I make the Vue bootstrap group item auto-update once a change happens with socket.io?</p>