Iterating through a list to generate calendars
I'd like to know how I could condense this into only being called once, rather than in each function.

One option would be to make a method that accepted the calendar or type and called the associated method
methods:
    generateCalendar(type) {
        const generateMethod = `generate${type}Calendar`
        if (typeof this[generateMethod] === 'function')
          this[generateMethod]()
          this.addToCalendar()
        }
      }

Then pass the type:
&lt;button @click=&quot;generateCalendar(calendar.type)&quot;&gt;

If the only property being accessed in the loop was that type property then destructuring assignment would allow it to be simplified:
 &lt;li v-for=&quot;({ type }, i) in calendars&quot; :key=&quot;i&quot;&gt;
   &lt;button @click=&quot;generateCalendar(type)&quot;&gt; 
      &lt;span&gt;{{ calendar.type }}&lt;/span&gt;
    &lt;/button
     

Alternatively, with using the method above the generator properties of the calendars could be removed, and calendars could perhaps just be an array of strings.
Also, it seems that three of the four calendar methods are nearly identical other than the class of calendar object created: generateGoogleCalendar, generateOutlookCalendar and generateYahooCalendar. A generic method could be used to replace those three methods (and accept the calendar type as a parameter to be used to dynamically invoke a constructor) or create them dynamically in a loop.