Vue checkbox not updating with data change

Having problems with my data in Vue updating the UI, but only checkboxes seem to have this problem.

I'm trying to allow only one checkbox to be checked at one time, therefore I'm setting all the checkboxes to false upon clicking one of them. However, this works in the data but isn't rendered correctly in the checkboxes.

HTML:

<table class="buildings-modify--table table-full table-spacing">
    <thead>
       <tr>
          <th>Name</th>
          <th>Primary</th>
          <th>Address</th>
          <th>City/Town</th>
          <th>Province</th>
          <th>Postal Code</th>
          <th>Phone</th>
          <th>Active</th>
       </tr>
     </thead>
     <tbody>
       <tr v-for="landlord in selectedLandlords" :key="landlord.id">
         <td></td>
         <td>                            
           <input type="checkbox" :value="landlord.is_primary" @change.prevent="makePrimaryLandlord(landlord)">
         </td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
       </tr>
   </tbody>

Vue Code:

export default {
     data: function() {
    return {
         selectedLandlords: []
    }
    },
    methods: {
          makePrimaryLandlord: function(landlord) {
              this.selectedLandlords = this.selectedLandlords.map(item => { item.is_primary = false; return item});
    }

}

}

Only the checkbox appears to have an issue. If I change say the name, or a text value with a filtered array setting them all to a specific value they change but the checkboxes data change doesn't reflect in the UI, however the data in Vue is correct.