Dynamic filtering with checkboxes

Hello,

I just discover InertiaJS and I need help.

I don't understand how it is possible to refresh only the students list when I click on the checkboxes to filter the list.

I explain : when I click on any of both checkboxes, I need to ask the server to retrieve the list of the students according to the checkboxes that are checked (active / inactive students).

In the code, using InertiaJS, I need to visit / reload the same page but by refreshing only the list of students. I don't need to refresh the checkboxes.

For the moment, when I refresh the page, the checkboxes are also refreshed, so that when I click on the inactive students checkbox, when the page reloads it is unchecked whereas it should be checked.

I probably don't understand some InertiaJS mechanism.

Can you help me ?

Here is my code.

<template>

  <el-row align="middle" justify="space-between">
    <el-col :span="18">
      <div class="title">Liste des {{ students_count }} étudiants</div>
      <el-checkbox-group v-model="filters">
        <el-checkbox :label="1">Etudiants actifs</el-checkbox>
        <el-checkbox :label="0">Etudiants inactifs</el-checkbox>
      </el-checkbox-group>
    </el-col>
    <el-col :span="6" align="right">
      <el-button
        type="primary">
        Créer un nouvel étudiant
      </el-button>
    </el-col>
  </el-row>

  <el-table
    :data="students"
    :default-sort = "{prop: 'fullname', order: 'ascending'}"
    table-layout="auto">

    <el-table-column
      prop="fullname"
      label="Nom"
      sortable>
      <template #default="scope">
        <el-button
          type="primary">{{ scope.row.fullname }}</el-button>
      </template>
    </el-table-column>

    <el-table-column
      prop="path.name"
      label="Parcours">
    </el-table-column>

    <el-table-column
      prop="project.name"
      label="Projet">
    </el-table-column>

    <el-table-column
      prop="sessions_count"
      label="Nombre de sessions"
      width="100">
    </el-table-column>

    <el-table-column
      prop="active"
      label="Actif"
      align="right"
      width="100">
      <template #default="scope">
        <el-button
        	v-if="scope.row.active"
          type="success"></el-button>
        <el-button
        	v-if="!scope.row.active"
          type="warning"></el-button>
      </template>
    </el-table-column>

  </el-table>

</template>

<script>

  import { Inertia } from '@inertiajs/inertia'

	export default {

    components: {
    },

	  props: {
      students: Object,
	  },

	  data() {
	  	return {
        filters: [1]
	  	}
	  },

	  mounted() {
	  },

    watch: {
      filters(newValue, oldValue) {
        Inertia.visit(route('students.index'), { data: { filters: this.filters }, only: ['students'] })
      }
    },

    computed: {
      students_count() {
        return this.students.length
      }
    },

    methods: {
    }

	}

</script>

<style scoped>

  .title {
    font-size: 1.4em;
    margin-bottom: 16px;
  }

</style>

Thanks a lot ;).

V