How to call a vue.js function on page load
<p>I have a function that helps filter data. I am using <code>v-on:change</code> when a user changes the selection but I also need the function to be called even before the user selects the data. I have done the same with <code>AngularJS</code> previously using <code>ng-init</code> but I understand that there is no such a directive in <code>vue.js</code> </p>

<p>This is my function:</p>

<pre><code>getUnits: function () {
        var input = {block: this.block, floor: this.floor, unit_type: this.unit_type, status: this.status};

        this.$http.post('/admin/units', input).then(function (response) {
            console.log(response.data);
            this.units = response.data;
        }, function (response) {
            console.log(response)
        });
    }
</code></pre>

<p>In the <code>blade</code> file I use blade forms to perform the filters:</p>

<pre><code>&lt;div class="large-2 columns"&gt;
        {!! Form::select('floor', $floors,null, ['class'=&gt;'form-control', 'placeholder'=&gt;'All Floors', 'v-model'=&gt;'floor', 'v-on:change'=&gt;'getUnits()' ]) !!}
    &lt;/div&gt;
    &lt;div class="large-3 columns"&gt;
        {!! Form::select('unit_type', $unit_types,null, ['class'=&gt;'form-control', 'placeholder'=&gt;'All Unit Types', 'v-model'=&gt;'unit_type', 'v-on:change'=&gt;'getUnits()' ]) !!}
    &lt;/div&gt;
</code></pre>

<p>This works fine when I select a specific item. Then if I click on all lets say <code>all floors</code>, it works. What I need is when the page is loaded, it calls the <code>getUnits</code> method which will perform the <code>$http.post</code> with empty input. In the backend I have handled the request in a way that if the input is empty it will give all the data. </p>

<p>How can I do this in <code>vuejs2</code>?</p>

<p>My Code: <a href="http://jsfiddle.net/q83bnLrx" rel="noreferrer">http://jsfiddle.net/q83bnLrx</a> </p>