title: How to update Vue array of components with a click IN one of the children components
body: <p>I am displaying an array of child components and in the child component, I need to click some text to make <code>THIS</code> child push to the front of the array.
  I've tried it where the child sees the array which doesn't seem to be of any help. And now I've tried to emit with an event to the parent component and I still can't seem to figure out how to push any of the child components to the beginning of the loop with a click <code>IN</code> the child component.</p>
  <p>Parent component and method:</p>
  <pre><code> &lt;location-item v-for=&quot;(location, index) in results&quot;
                         :key=&quot;location.Id&quot;
                         :index=&quot;index&quot;
                         :location=&quot;location&quot;
                          @changeLocation=&quot;changeLocation(location, $event)&quot; /&gt;
  
  methods(): {
        changeLocation(location, newIndex) {
             location.index = newIndex;
      },
  }
  </code></pre>
  <p>Child components's clickable text and method</p>
  <pre><code>&lt;a @click=&quot;changeCurrent&quot;&gt;
     Change Location
  &lt;/a&gt;
  
  methods: {
        changeCurrent() {
          this.$emit('changeLocation', this.newIndex);
        }
  },
  
  </code></pre>
  <p>So when it's clicked in the child component, it throws <code>THAT</code> child component to the beginning of the <code>v-for</code> loop. The suggestion I'm giving is the closest I feel I've gotten, yet, it does nothing. I haven't seen anyone online really seem to do this so I figured I'd come to ask here.</p>