title: VanillaJS to VueJS Error: bad element for Flickity: carousel
body: <p>I'm trying to get <a href="https://codepen.io/desandro/pen/RNQgpB" rel="nofollow noreferrer">this Flickity example</a> (CodePen) to work in a VueJS component. </p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="carousel"&gt;
    &lt;div class="carousel-cell"&gt;&lt;/div&gt;
    &lt;div class="carousel-cell"&gt;&lt;/div&gt;
    &lt;div class="carousel-cell"&gt;&lt;/div&gt;
    &lt;div class="carousel-cell"&gt;&lt;/div&gt;
    &lt;div class="carousel-cell"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code> var flkty = new Flickity('.carousel');
  
      flkty.on( 'dragStart', function() {
        console.log('dragStart');
      });
  </code></pre>
  
  <p>I get this error:</p>
  
  <blockquote>
    <p>bad element for Flickity: carousel</p>
  </blockquote>
  
  <p>My <strong>not working</strong> version:</p>
  
  <p>JS data ()</p>
  
  <pre><code>import Flickity from 'flickity'
  var flkty = new Flickity('.carousel')
  export default {
    data () {
      return {
        flickityOptions: {
          dragThreshold: 50,
          initialIndex: 1,
          prevNextButtons: false,
          pageDots: false,
          wrapAround: false,
          hash: true,
          percentPosition: false
        },
  </code></pre>
  
  <p>JS mounted ()</p>
  
  <pre><code>  mounted () {
      flkty.on('dragStart', function () {
        this.stageDragging = true
        console.log('stageDragging: ' + this.stageDragging)
      })
      flkty.on('dragEnd', function () {
        this.stageDragging = false
        console.log('stageDragging: ' + this.stageDragging)
      })
  </code></pre>
  
  <p>How to use <a href="https://codepen.io/desandro/pen/RNQgpB" rel="nofollow noreferrer">this Flickity example</a>  in a VueJS component?</p>