P5 implementation conflicts with Vue.js

[christianechevarria]

When vue inhabits the same scope as the p5 canvas the canvas no longer works.

Works:

<div class="columns">
          <div class="column">
            <!-- P5 canvas -->
            <canvas id="canvas" width="450" height="512"> </canvas>
            <div class="field game-slider">
              <label class="label has-text-white">Speed</label>
              <input id="speedSlider" class="slider has-output is-small" step="1" min="0" max="10" value="1" type="range">
              <output id="speed" for="speedSlider">1</output>
            </div>
          </div>
          <div id="app" class="column"> <!-- Vue app scope -->
            <span class="banner-text has-text-white">

Doesn't work:

<div id="app" class="columns"> <!-- Vue app scope -->
          <div class="column">
            <!-- P5 canvas -->
            <canvas id="canvas" width="450" height="512"> </canvas>
            <div class="field game-slider">
              <label class="label has-text-white">Speed</label>
              <input id="speedSlider" class="slider has-output is-small" step="1" min="0" max="10" value="1" type="range">
              <output id="speed" for="speedSlider">1</output>
            </div>
          </div>
          <div class="column">
            <span class="banner-text has-text-white">

If we follow the techniques detailed in this article we can get around this, but it might take updating the p5 version and it is unknown what that will do to the current implementation

Will leave this for now until other features are successfully added