問題はVue.jsからionicのwebコンポーネントを使って開発している時に起こった。
どうやらデータバインディングができていない。

<template>
<ion-item>
  <ion-label position="stacked">Name</ion-label>
  <ion-input :value="name"></ion-input>
</ion-item>
</template>
<script>
export default {
  name: "mypage",
  data() {
    return {
      name: ""
    }
  }
}
</script>

公式のissueに解決策があった。

v-model support for web components (stenciljs)

つまりこうするといい。
@changeとか@inputとかのイベントで$event.target.valueを取得し、それをVueのdataに渡す。

<template>
<ion-item>
  <ion-label position="stacked">Name</ion-label>
  <ion-input :value="name" @input="name = $event.target.value"></ion-input>
</ion-item>
</template>
<script>
export default {
  name: "mypage",
  data() {
    return {
      name: ""
    }
  }
}
</script>

ちなみにionicのion-selectを使う場合は@ionChangeで取得するといい

<ion-item>
  <ion-label position="stacked">性別</ion-label>
  <ion-select placeholder="Select One" :value="sex" @ionChange="sex = $event.target.value">
    <ion-select-option value="f">女性</ion-select-option>
    <ion-select-option value="m">男性</ion-select-option>
  </ion-select>
</ion-item>