Need Primevue SelectButton to be unqiue for each DataTable Row

Question

I have created a datatable containing 2 columns (column name and hide/show). When I click a SelectButton for one row, the SelectButton on all the rows are changed at the same time. How do I make each row have its own SelectButton? Please see image and code below for reference. Thank you in advance for your help.

enter image description here

<template>
<div>
    <DataTable :value="dataColumns">
        <Column field="col_name" header="Column"></Column>
        <Column header="Show/Hide" dataKey="value">
        <template #body="slotProps">
            <div class="card flex justify-content-center">
                <SelectButton                         
                    :title="slotProps.data.col_name" 
                    v-model="selectedOption" 
                    :options="options"                         
                    aria-labelledby="basic"
                    @change="toggleHideShow(slotProps.data.col_name)" />
            </div>
        </template>               
        </Column>         
    </DataTable>        
</div>

const defaultOption = ref('Show');
const options = ref(['Hide', 'Show']);

export default {
  data() {
    return {
      selectedOption: defaultOption,
      selectedColumn: null,
      displayOptions: [], //holds column names and corresponding hide/show option
      dataColumns: [{
          col_name: 'Emp Unit ID',
          show_hide: 1,
          value: 0
        },
        {
          col_name: 'Name',
          show_hide: 1,
          value: 1
        },
        {
          col_name: 'Unit Type',
          show_hide: 1,
          value: 2
        },
        {
          col_name: 'DataSource',
          show_hide: 0,
          value: 3
        }
      ]
    }
  },