Vue.js Calling function on a rendered component
<p>I want to create an interactive scrumboard using Laravel and Vue.js containing multiple columns and within those columns multiple tickets.</p>

<p>These tickets are vue components with some nice edit / delete / (un)assign developer functionality and is used on other pages as well.</p>

<p>I have multiple columns defined like this:</p>

<pre><code>        &lt;div id="scrumboard"&gt;
            &lt;div class="scrumboard__column"&gt;
                &lt;div class="scrumboard__title"&gt;Open&lt;/div&gt;
                &lt;div class="scrumboard__tickets_wrapper" data-status="open"&gt;
                    @if( $sprint-&gt;hasTicketsOfStatus("open") )
                        @foreach( $sprint-&gt;getTicketsByStatus("open") as $ticket )
                            &lt;ticket :data="{{ $ticket-&gt;getJsonData(true) }}"&gt;&lt;/ticket&gt;
                        @endforeach
                    @endif
                &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="scrumboard__column"&gt;
                &lt;div class="scrumboard__title"&gt;In progress&lt;/div&gt;
                &lt;div class="scrumboard__tickets_wrapper" data-status="progress"&gt;
                    @if( $sprint-&gt;hasTicketsOfStatus("progress") )
                        @foreach( $sprint-&gt;getTicketsByStatus("progress") as $ticket )
                            &lt;ticket :data="{{ $ticket-&gt;getJsonData(true) }}"&gt;&lt;/ticket&gt;
                        @endforeach
                    @endif
                &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="scrumboard__column"&gt;
                &lt;div class="scrumboard__title"&gt;Finished&lt;/div&gt;
                &lt;div class="scrumboard__tickets_wrapper" data-status="closed"&gt;
                    @if( $sprint-&gt;hasTicketsOfStatus("closed") )
                        @foreach( $sprint-&gt;getTicketsByStatus("closed") as $ticket )
                            &lt;ticket :data="{{ $ticket-&gt;getJsonData(true) }}"&gt;&lt;/ticket&gt;
                        @endforeach
                    @endif
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
</code></pre>

<p>And as you can see it renders a ticket component for each ticket it finds for each column.</p>

<p>No i have turned the scrumboard__tickets_wrapper div's into jquery ui sortable lists which allows you to swap the tickets between columns.</p>

<pre><code>&lt;script&gt;
    $(document).ready(function(){

        $(".scrumboard__tickets_wrapper").sortable({
            connectWith: '.scrumboard__tickets_wrapper',
            receive: function(event, ui){
                console.log("Switched columns");
                console.log(event);
                console.log(ui);
                var target = $(event.target);
                target.css("background-color", "#ff0000");
            }
        });
&lt;/script&gt;
</code></pre>

<p>Everything is working so far, now my question is: how do I dynamically call the "updateStatus()" function on a ticket component once the ticket is dropped into another list?</p>

<p>As you can see I can get the specific element being dropped and the sortable list it's been dropped into. So I know what the new status is by grabbing the data-status property of the wrapper + I know which element was dropped.</p>

<p>But how do I grab the instance of the ticket component in question and call the updateStatus function to save the new status?</p>

<p>Thanks in advance!</p>

<p><a href="http://i.stack.imgur.com/L4xhW.png" rel="nofollow">Screenshot of the scrumboard</a></p>