title: str.split() is splitting at every letter and not at the delimiter
body: <p>I'm trying to split a string of tags that I'm getting back from firebase by ',' and then store them in my data() for rendering. When I render out the firebase snapshot data after I split they tags in the console they are correctly formatted like so:</p>
  <pre><code>&quot;tag1&quot; &quot;tag2&quot;
  </code></pre>
  <p>but when I render them in my vue app, they are split at every letter (or at least a div is generated and is displaying for every letter) like so:</p>
  <pre><code>&lt;div&gt;&quot;t&quot;&lt;/div&gt;
  &lt;div&gt;&quot;a&quot;&lt;/div&gt;
  &lt;div&gt;&quot;g&quot;&lt;/div&gt;
  &lt;div&gt;&quot;1&quot;&lt;/div&gt;
  
  </code></pre>
  <p>Can someone let me know if this is an issue with my vue app or my firebase call?</p>
  <p>I have included some dummy data that I'm using to show the final result of how the tags array in data should look.</p>
  <p>Here's my app for reference :)</p>
  <pre><code>&lt;div id=&quot;container&quot;&gt;
  &lt;div class=&quot;topbar&quot;&gt;
  
            &lt;h3 id=&quot;header&quot;&gt;DevDeep&lt;/h3&gt;
  
             &lt;div id=&quot;searchDiv&quot;&gt;
                  &lt;b-form-input id=&quot;search&quot; v-model=&quot;search&quot; placeholder=&quot;search articles&quot;&gt;&lt;/b-form-input&gt;
                  &lt;font-awesome-icon id=&quot;searchBtn&quot; @click=&quot;searchResults()&quot; icon=&quot;search&quot; /&gt;
            &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;!--main part of page--&gt;
  &lt;div class=&quot;bod&quot;&gt;
  
        &lt;div class=&quot;sideContainer&quot;&gt;
              &lt;h4 id=&quot;category&quot;&gt;categories&lt;/h4&gt;
            &lt;ul id=&quot;listoflinks&quot; v-for=&quot;cat in categories&quot; :key=&quot;cat.toString()&quot;&gt;
              &lt;div @click=&quot;searchResultsByCat(cat)&quot;&gt;{{cat}}&lt;/div&gt;
            &lt;/ul&gt;
        &lt;/div&gt;
  
  
  &lt;div id=&quot;centerContainer&quot;&gt;
        &lt;div&gt;
          &lt;h5&gt; Tag list &lt;/h5&gt;
  
          &lt;div class=&quot;flexContainer&quot;&gt;
              &lt;div id=&quot;selectedTags&quot; v-for=&quot;tag in tagList&quot; :key=&quot;tag.toString()&quot;&gt;
                  &lt;span id=&quot;tag&quot; @click=&quot;removeTag(tag)&quot;&gt;{{tag}}&lt;/span&gt;   
              &lt;/div&gt; 
            &lt;font-awesome-icon id=&quot;searchBtn&quot; @click=&quot;searchbyTags()&quot; icon=&quot;search&quot; /&gt;
          &lt;/div&gt;
  
           
        &lt;/div&gt;
  
        &lt;div id=&quot;artDiv&quot; v-for=&quot;art in articles&quot; :key=&quot;art.title&quot;&gt;
            
            &lt;div @click=&quot;gotoArticle(art)&quot; id=&quot;thumbnail&quot;&gt;
              &lt;h5 &gt;{{art.title}}&lt;/h5&gt;  
              &lt;img :src=art.image height=&quot;100px&quot; width=&quot;100px&quot; alt=&quot;article thumbnail&quot;&gt;
            &lt;/div&gt;
            
  &lt;!--TAGS--&gt;/////////////////////////////////////////
          &lt;div class=&quot;flexContainer&quot;&gt;
              &lt;div id=&quot;tags&quot; v-for=&quot;tag in art.tags&quot; :key=&quot;tag.toString()&quot;&gt;
                  &lt;span id=&quot;tag&quot; @click=&quot;addTagToSearch(tag)&quot;&gt;{{tag}}&lt;/span&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  &lt;!--TAGS--&gt;//////////////////////////////////////////
  
        &lt;/div&gt;
  &lt;/div&gt;
  
  
        &lt;div class=&quot;addContainer&quot;&gt;adds&lt;/div&gt;
    &lt;/div&gt;
  
    &lt;!--main part of page--&gt;
  
  &lt;/div&gt;
  
  
  &lt;/template&gt;
  
  &lt;script&gt;
  const fb = require('../../fireconfig.js')
  
  export default {
    name: 'Home',
    data:function() {
      return{
         articles: [
           {
             title: 'modern web app security',
             body: 'some content here about web app security',
             image: 'dd',
             tags: ['cyber security','web apps', 'web development']
          },
           {
             title: 'intro to ArcGIS',
             body: 'an article to show users how to do GIS stuff',
             image: 'dwwd',
             tags: ['arcgis','node js','gps services']
          },
          {
             title: 'Vue.js injecting props',
             body: 'this is how to inject vue props into a component',
             image: 'dwwd',
             tags: ['vue','props','components','web development','web apps']  
          }
        ],
        categories:['web development', 'arcgis','cyber security','partnerships'], 
        search: '',
        tagList: []
      }
    },
    props: {
      post: Object
    },
    created(){
                  console.log('db post will go here later')
            let ref = fb.db.collection('articles')
            ref.get()
          .then(snapshot =&gt; {
            if (snapshot.empty) {
              console.log('No matching documents.');
              return;
            }  
            snapshot.forEach(doc =&gt; {  //this works for each doc
              console.log(doc.id, '=&gt;', doc.data());
  
              doc.data().tags = doc.data().tags.split(&quot;,&quot;) // its splitting each letter we need to only split at the comma
              console.log(doc.data().tags)
  
              this.articles.push(doc.data()) //push object into state array
            })
  
          })
          .catch(err =&gt; {
            console.log('Error getting documents', err);
          });
    },
  }
  &lt;/script&gt;
  </code></pre>