Im using laravel and vuejs in my current project. When I was going to render the data in my component, It shows my data but in my editor there is a warning 
and I dont mind it really because it works perfectly fine. I tried to fix it but I cant get the solution. Someone know what should I do?

Here is the warining msg. 

`[vue/no-use-v-if-with-v-for]
The 'rooms' variable inside 'v-for' directive should be replaced with a computed property that returns filtered array instead. You should not mix 'v-for' with 'v-if'.`
`

Thanks in advance!

Reservations.vue

```
    <div class="tab-pane" id="tab_2">
                        <form @submit.prevent="login" @keydown="form.onKeydown($event)">

                                <div class="form-group">
                                <label>Guest Id</label>
                                <select class="form-control">
                                    <option v-for="guest in guests" :key="guest.guest_id">{{guest.guest_id}} - {{guest.first_name}} {{guest.last_name}}</option>
                                </select>
                                </div>

                                <div class="form-group">
                                <label>Room Id</label>
                                <select class="form-control" >
                                    <option v-for="room in rooms" :key="room.room_id" v-if="room.status === 'Unavailable'">{{room.room_id}} - {{room.status}}</option>
                                </select>
                                </div>

                            </form>
                    </div>

```

the script below:

```
<script>
    export default {
      data(){
        return {
            reservations: {},
            guests: {},
            rooms: {},
            form: new Form ({
                guest_id: '',
                room_id: '',
                reservation_date: '',
                check_in:'',
                check_out: '',
                persons: '',
            })
        }
      },
      methods:{
          getReservations(){
              axios.get('api/reservation')
                .then(({data}) => (this.reservations = data))
          },
          addReservations(){
              this.form.post('api/reservation')
                .then(()=>{
                    alert('success')
                })
          },
          getGuests(){
              axios.get('api/guest')
                .then(({data}) => (this.guests = data))
          },
           getRooms(){
              axios.get('api/room')
                .then(({data}) => (this.rooms = data))
          }
      },
      computed: {

      },
        created() {
            this.getRooms()
            this.getReservations()
            this.getGuests()
            console.log('Component mounted.')
        }
    }
</script>

```