veu中pug模板怎么動(dòng)態(tài)添加屬性值，為什么我這個(gè)沒(méi)有渲染

這是我的pug模板

<template lang="pug">
  div
    form(
      id="form"
      method="POST"
      action=""
    )
      div(class="form-data")
        input(type="text" name="data" id="data" :value="data")
</template>

這是我的vue data

 data () {
          return {
            data: '1111'
          }
        }

但是為什么渲染出來(lái)沒(méi)有值

還有哪怕我動(dòng)態(tài)的用js添加

document.getElementById('data').value = 1

也會(huì)如下錯(cuò)誤

為什么會(huì)這樣，感謝各位大佬給小弟提供一丟丟幫助