Why does my publication list array return undefined in Vuejs?

Question

I'm learning to build a custom preference centre and trying to display all the lists for a subscriber. I retrieved all the lists like below:

<script runat='server' type="text/javascript">
   Platform.Load('core', '1');
   var prox = new Script.Util.WSProxy();

   //Retrieve a subscriber and their lists
   var sk = Attribute.GetValue('_subscriberkey')
   if(sk) {
      var subObj = Subscriber.Init(sk)
      var subData = Subscriber.Retrieve({
        Property: 'SubscriberKey',
        SimpleOperator: 'equals',
        Value: sk
      })
      //Retrieve the list property
      var subLists = subObj.Lists.Retrieve({
            Property: "Type",
            SimpleOperator: "equals",
            Value: "Public"
      })

   }
   try{
</script>
          
<script type="text/javascript" runat="server">
   Write(Stringify(subLists))
   }
   catch(e) {
   Write(Stringify(e));
   }
</script>

And I was able to output the all the lists with the Write()function (which is an array of json objects). But when I tried to console.log the subLists with Vuejs, I got undefined (note that I was able to console.log other variables like email and sk).

<div id="app">
     <button @click="debug">Console</button>
</div>

<script>
  new Vue({
    data(){
      subscriber: {
        lists: '<ctrl:var name="subLists"/>'
      }
    },
    methods: {
      debug(){
        console.log(this.subscriber.lists)
      }
    }
  })
</script>

I'm not sure why I got undefined when trying to console.log the list array. Any help would be appreciated. Thanks!

Answer 1

I figured it out that I had to stringify the subLists first: subLists = Stringify(subLists)