Updating integers in a FormulateForm doesn't work

Question

I'm just getting started looking at Vue Formulate, so maybe I'm missing something obvious. I'm binding a FormulateForm to a simple object that contains a few properties. When I initially set the model, the values display properly in the form, but when I set the model to a different object, the text and boolean properties are updated in the form, but the integer properties retain their original values. Seems odd that something so basic would be broken, so am I doing something wrong?

<template>
  <div>
    person_id: {{localData.person_id}}
    <FormulateForm v-model="localData">
      <FormulateInput name="person_id" label="Person Id" />
      <FormulateInput name="first_name" label="First Name" />
      <FormulateInput name="age" label="Age" />
      <FormulateInput name="is_cool" type="checkbox" label="Cool?" />
    </FormulateForm>
    <p>
      Click setData1 and then setData2.  The integer values (person_id and age) are not updated in the form.
    </p>
    <div style="display: flex">
      <FormulateInput type="button" label="setData1" @click="setData1" />
      <FormulateInput type="button" label="setData2" @click="setData2" />
    </div>
  </div>
</template>

<script>
export default {
  data: () => ({
    localData: {}    
  }),
  methods: {
    setData1: function(){
      this.localData = { person_id: 1, first_name: 'Bob', age: 24, is_cool: true };
    },
    setData2: function(){
      this.localData = { person_id: 2, first_name: 'Tony', age: 32, is_cool: false };
    }
  }
};
</script>

codesandbox.io

Answer 1

Just add options to checkbox as below

 <FormulateInput name="is_cool" type="checkbox" label="Cool?" :options="is_cool"/>