Example 1

        <template>
        
            <li class="dropdown">
        
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true">
                    <i class="icon-bell2"></i>
                    <span class="visible-xs-inline-block position-right">Activity</span>
                    <span v-if="notifications.length > 0" class="status-mark border-pink-300"></span>
                </a>
        
                <div class="dropdown-menu dropdown-content">
        
                    <div class="dropdown-content-heading">
                        Activity
                        <ul class="icons-list">
                            <li @click="readAll()"><a href="#"><i class="icon-menu7"></i></a></li>
                        </ul>
                    </div>
        
                    <ul class="media-list dropdown-content-body width-350" v-if="notifications.length > 0">
        
                        <notification v-for="notification in notifications">
        
                            <a href="#">{{ notification.target_id }}</a> already parsed
        
                            <template slot="time">4 minutes</template>
        
                        </notification>
        
                    </ul>
        
                    <ul class="media-list dropdown-content-body width-350" v-else>
                        No activity
                    </ul>
        
                </div>
        
            </li>
        
        </template>
        
        <script>
            export default {
                methods: {
        
                    readAll: function () {
        
                        axios.post('/notes/readed')
                            .then(function (response) {
                                this.notifications = [];
                            }.bind(this))
                            .catch(function (error) {
                                console.log(error);
                            });
        
                    },
        
                },
                data() {
                    return {
                        notifications: []
                    }
                },
                mounted() {
        
                    axios.get('/notes')
                        .then(function (response) {
                            this.notifications = response.data;
                        }.bind(this))
                        .catch(function (error) {
                            console.log(error);
                        });
        
                    Echo.private('App.User.' + window.Laravel.userId)
                        .notification((notification) => {
                            console.log(notification);
                            this.notifications.push(notification);
                        });
                }
            }
        </script>

Example 2

        <template>
        
            <div class="target-create-pane">
        
                <div class="form-group">
                    <label class="control-label col-lg-2">Site ID</label>
                    <div class="col-lg-10">
                        <input name="id" type="text" v-model="site_id" @blur="blured()" class="form-control">
                    </div>
                </div>
        
        
                <div class="tabbable tab-content-bordered" v-if="groups.length > 0">
                    <ul class="nav nav-tabs nav-tabs-highlight">
                        <li class="active"><a href="#groups" data-toggle="tab" aria-expanded="true">Groups</a></li>
                        <li class=""><a href="#friends" @click="loadFriends()" data-toggle="tab"
                                        aria-expanded="false">Friends</a></li>
                    </ul>
        
                    <div class="tab-content">
                        <div class="tab-pane has-padding active" id="groups">
        
                            <table class="table target-create-table table-condensed">
                                <thead>
                                <tr>
                                    <th width="3%">Follow</th>
                                    <th>Group</th>
                                    <th>Screen Name</th>
                                    <th>Public</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr v-for="group in groups">
                                    <td><input :id="group.id" type="checkbox" :value="'-' + group.id" name="groups[]"></td>
                                    <td>
                                        <a href="" target="_blank">
                                            <img :src="group.photo_50" width="30" class="group-photo">
                                        </a>
                                        <label :for="group.id">{{ group.name }}</label>
                                    </td>
                                    <td>{{ group.screen_name }}</td>
                                    <td v-if="group.is_closed == 0">Yes</td>
                                    <td v-else>No</td>
                                </tr>
                                </tbody>
                            </table>
        
                        </div>
        
                        <div class="tab-pane has-padding" id="friends">
        
                            <table class="table target-create-table table-condensed">
                                <thead>
                                <tr>
                                    <th width="3%">Follow</th>
                                    <th>Friend</th>
                                    <th>Screen Name</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr v-for="friend in friends">
                                    <td><input :id="friend.id" type="checkbox" :value="friend.id" name="friends[]"></td>
                                    <td>
                                        <a href="" target="_blank">
                                            <img :src="friend.photo_50" width="30" class="group-photo">
                                        </a>
                                        <label :for="friend.id">{{ friend.first_name }} {{ friend.last_name }}</label>
                                    </td>
                                    <td>{{ friend.domain }}</td>
                                </tr>
                                </tbody>
                            </table>
        
                        </div>
        
                    </div>
                </div>
        
        
                <div class="text-right">
                    <button type="submit" :disabled="submitDisabled" class="btn btn-primary">Save
                        <i class="icon-arrow-right14 position-right"></i></button>
                </div>
        
            </div>
        
        </template>
        
        <script>
            export default {
                methods: {
        
                    loadFriends: function () {
        
                        if (this.friends.length == 0) {
        
                            axios.post('/friends', {
                                site_id: this.site_id,
                            })
                                .then(function (response) {
                                    if (response.data) {
                                        this.friends = response.data;
                                        this.submitDisabled = false;
                                    }
        
                                }.bind(this))
                                .catch(function (error) {
                                    console.log(error);
                                });
        
                        }
        
                    },
        
                    loadGroups: function () {
                        axios.post('/groups', {
                            site_id: this.site_id,
                        })
                            .then(function (response) {
                                if (response.data) {
                                    this.groups = response.data;
                                    this.submitDisabled = false;
                                }
                            }.bind(this))
                            .catch(function (error) {
                                console.log(error);
                            });
                    },
        
                    blured: function () {
        
                        this.groups = [];
                        this.friends = [];
        
                        this.loadGroups();
        
                    }
                },
                data() {
                    return {
                        friends: [],
                        groups: [],
                        site_id: 9999999,
                        submitDisabled: true
                    }
                },
                mounted() {}
            }
        </script>