Vue.js와 구글.script.run 불협화음

문제점

google.script.run에서 얻은 값을 Vue에 직접 건네주면 양방향 귀속은 작용하지 않는다.
xxx.js

const userData = await new Promise( resolve => {
  google.script.run
  .withSuccessHandler( resolve )
  .getUserData()
} )

const app = new Vue( {
  data: { userData, },
} )

xxx.html

<!-- 画面上で操作してもuserData.fooの値が変化してくれない -->
<p><input v-model="userData.foo" /></p>

까닭

google.script.run가 실행한 화면(전국적 대상)과 응용한 화면이 다르기 때문으로 추정된다.
이전 기사에서 언급한 바와 같이 GAS의 웹 응용 프로그램iframe은 두 층에 끼워져 있고google.script.run은 첫 번째iframe로 정의되었다. 여기에 쓴 스크립트는 두 개iframe에 놓여 있기 때문에 같은 Object 유형이라도 구조기는 다르다.Vue.js 관련 처리를 찾지 못했지만 prototype 처리에 의존한 것 같습니다.
참고로 {{ value }}에 표시된 부분도 정상적으로 작동하지 않고 [object Object]와 같은 원시적인 자바스크립트가 표시됩니다.
여기Vue.js에서 상응하는 부분을 발견하였으며, 여기서 발췌하였다.
이것만 봐도 toString과Object.prototype.toString의 참조가 일치하지 않으면 JSON화할 수 없습니다.
Vue.js에서 발췌하다

  /**
   * Get the raw type string of a value, e.g., [object Object].
   */
  var _toString = Object.prototype.toString;

//中略

  /**
   * Convert a value to a string that is actually rendered.
   */
  function toString (val) {
    return val == null
      ? ''
      : Array.isArray(val) || (isPlainObject(val) && val.toString === _toString)
        ? JSON.stringify(val, null, 2)
        : String(val)
  }

해결책

처음에는 Object.assign를 사용하려고 했지만 배열과null와 다른 기본 데이터 유형으로 나누거나 귀속적으로 처리하는 등 신경 쓰는 내용으로 바뀌어 간결한 JSON화로 바로 씻는 방법을 사용했다.
xxx.js

const userData = await new Promise( resolve => {
  google.script.run
  .withSuccessHandler( v => resolve( JSON.parse( JSON.stringify( v ) ) ) )
  .getUserData()
} )

const app = new Vue( {
  data: { userData, },
} )

이상!
Google Apps Script의 웹 애플리케이션으로 개발하는 것은 약간 취미적인 느낌입니다.