Buefy switch not applying to rows - php

Question

I am fetching some results in a loop which is then output into a table - but when applying a 'switch' element from Buefy (Bulma UI kit) it will only apply it to the first item in the row and not anything following.
Here is the HTML of my loop:
<?php
$query = $conn->prepare("SELECT *
FROM dashboard");
$query->execute();
$result = $query->fetchAll();
?>
<div class="container">
<div class="wrapper">
<div class="dashTable">
<div class="header">
<div class="col">Name</div>
<div class="col">Status</div>
<div class="col">Created</div>
<div class="col">Options</div>
</div>
<?php foreach($result as $row){ ?>
<div class="body">
<div class="col">
<a title="View New Dashboard" href="../loading.php?dashboard_id=50">
<?php
echo $row['name'];
?>
</a>
</div>
<div class="col">
<!-- CLICK TO UPDATE STATUS -->
status
<div id="app1">
<template>
<section>
<div class="field">
<b-switch v-model="isSwitchedCustom"
true-value="Active"
false-value="Inactive" type="is-success">
{{ isSwitchedCustom }}
</b-switch>
</div>
</section>
</template>
</div>
</div>
<div class="col"><?php echo date( 'd-m-Y', strtotime($row['created_at']) ); ?></div>
<div class="col">
<span class="tag is-warning is-medium">
Edit
</span>
<span id="confirm-delete" class="tag is-danger is-medium" #click="confirmCustomDelete">
Delete
</span>
</div>
</div>
<?php } ?>
</div>
</div>
</div>
I am just not sure why after the first it does not apply to all rows?