title: how to correctly generate an nested array in vue
body: <p>I have a vue application where I am right now getting this kind of an json object:</p>
  <pre class="lang-json prettyprint-override"><code>    [
         {
            &quot;meetingName&quot;:&quot;ewq&quot;,
            &quot;meetingUrl&quot;:&quot;&quot;,
            &quot;meetingPw&quot;:&quot;&quot;,
            &quot;date&quot;:&quot;2021-05-30&quot;,
            &quot;times&quot;:[
               {
                  &quot;startTime&quot;:&quot;15:30&quot;,
                  &quot;endTime&quot;:&quot;16:30&quot;
               },
               {
                  &quot;startTime&quot;:&quot;17:30&quot;,
                  &quot;endTime&quot;:&quot;18:30&quot;
               }
            ]
         },
         {
            &quot;meetingName&quot;:&quot;ewq&quot;,
            &quot;meetingUrl&quot;:&quot;&quot;,
            &quot;meetingPw&quot;:&quot;&quot;,
            &quot;date&quot;:&quot;2021-05-31&quot;,
            &quot;times&quot;:[
               {
                  &quot;startTime&quot;:&quot;15:30&quot;,
                  &quot;endTime&quot;:&quot;16:30&quot;
               }
            ]
         }
      ]
  </code></pre>
  <p>But I am aiming for something like this:</p>
  <pre class="lang-json prettyprint-override"><code>      {
        &quot;meetingName&quot;:&quot;Test&quot;,
        &quot;meetingPw&quot;:&quot;test22&quot;,
        &quot;meetingUrl&quot;:&quot;localhost&quot;,
        &quot;meetingTimes&quot;:[
           {
              &quot;date&quot;:&quot;15.12.2020&quot;,
              &quot;times&quot;:[{
                 &quot;startTime&quot;:&quot;15:00&quot;,
                 &quot;endTime&quot;:&quot;16:00&quot;
              }]
           },
           {
              &quot;date&quot;:&quot;25.12.2020&quot;,
              &quot;times&quot;:[
                 {
                    &quot;startTime&quot;:&quot;17:00&quot;,
                    &quot;endTime&quot;:&quot;18:00&quot;
                 },
                 {
                    &quot;startTime&quot;:&quot;19:00&quot;,
                    &quot;endTime&quot;:&quot;2:00&quot;
                 }
              ]
           }
        ]
     }
  </code></pre>
  <p>But I just cant change it to get like this in my code, could someone look at my code and tell me where my mistake is?</p>
  <pre class="lang-js prettyprint-override"><code>    &lt;script&gt;
      import DatePickerComponent from &quot;@/components/DatePickerComponent&quot;;
      
      export default {
        name: &quot;GenerateMeetingSettings&quot;,
      
        data: () =&gt; ({
          selectedTime: [],
          dates: new Date().toISOString().substr(0,10),
          datesFinal: [],
          meetingSettingUrl: &quot;&quot;,
          meetingPW: &quot;&quot;,
          generatedLink: false,
          meetingName: &quot;&quot;,
          dialog: false,
          menu: false,
          modal: false,
          menu2: false,
          menu3: false
        }),
      
        methods:{
      
          addTimeFields(){
      
            this.selectedTime.push({
              startTime:&quot;&quot;,
              endTime: &quot;&quot;,
            })
          },
          saveDateAndTIme(e) {
            this.datesFinal.push({
              meetingName: this.meetingName,
              meetingUrl: this.meetingSettingUrl,
              meetingPw: this.meetingPW,
              date: this.dates,
              times: this.selectedTime
              }
            )
            this.selectedTime  = [];
          },
      
          generateMeetingLink(){
           let meetinId = this.meetingName
            console.log(this.meetingName)
            this.meetingSettingUrl = &quot;http://localhost:8080/&quot; + meetinId
            this.generatedLink = true
      
            console.log(JSON.stringify(this.datesFinal))
      
      
          }
      
        }
  </code></pre>
  <p>I just posted the script part as there the logic happens for the array which is generated</p>