Vue.js + Element UI - Как изменить значение el-switch

У меня есть данные с сервера. Данные ответа представляют собой целое число 1 или 0. Поскольку я использую элемент ui el-switch, он устанавливает значение с логическим значением true или false.

Могу ли я чем-нибудь помочь? Это мой код

<div class = "row">
          <el-col :span = "9">
            <el-form-item>
              <p style = "margin-top: 15px">sale in POS</p>
            </el-form-item>
          </el-col>
          <el-col :span = "15" class = "switch-varian">
            <el-switch inactive-color = "#ff4949" v-model = "product.pos_hidden" @change = "valuePOS"></el-switch>
            <div v-if = "product.pos_hidden === 1">
              <p class = "desc-switch">
                <strong>Yes</strong>
              </p>
              <p class = "desc-switch">This Product Sale in POS</p>
            </div>
            <div v-else>
              <p class = "desc-switch">
                <strong>No</strong>
              </p>
              <p>This Product Not Sale in POS</p>
            </div>
          </el-col>
        </div>

methods: {
loadData() {
  this.loading = true
  let headers = {
    Authorization: 'Bearer ' + window.accessToken
  }

  axios({
    method: 'GET',
    url: BASE_API + 'product/' + this.$route.params.id,
    params: this.params,
    headers: headers
  })
    .then(response => {
      this.product = response.data.data
      this.loading = false
    })
    .catch(error => {
      console.info(error)
      this.loading = true
      this.$notify({
        title: 'Error: ' + error,
        type: 'warning',
        message: 'Error: ' + error
      })
    })
},
valuePOS(val) {
  if (val === true) {
    fooBar | 1
  } else {
    fooBar | 0
  }
}

Ожидал : Я хочу изменить значение с ответа на логическое значение. А затем я отредактирую это значение и отправлю запрос на сервер с новым значением в виде целого числа.