JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/vue@2.2.5/dist/vue.js"></script>
<div id="app">
<!-- FIRST SECTION -->
  <div class="section">
    <div class="title" v-on:click="toggle">
      <span class="toggleIcon" id="toggleIcon">{{toggleIcon}}</span>
      Toggle This Section
    </div>
    <hr/>
    <div class="body" id="toggle">
      <img v-bind:src="imageUrl">
    </div>
  </div>
<!-- SECOND SECTION -->
  <div class="section">
    <div class="title" v-on:click="toggle">
      <span class="toggleIcon" id="toggleIcon">{{toggleIcon}}</span>
      Toggle This Section
    </div>
    <hr/>
    <div class="body" id="toggle">
      <img v-bind:src="imageUrl">
    </div>
  </div>
</div>

CSS

.section {
  width: 300px;
  background: lightgrey;
  margin-bottom: 20px;
}

img { height: 100px; }

#toggle{
    display:block;
  }

JavaScript

var app = new Vue({
    el: '#app',
    data: { 
    	imageUrl: 'https://cdn.vox-cdn.com/thumbor/Pkmq1nm3skO0-j693JTMd7RL0Zk=/0x0:2012x1341/1200x800/filters:focal(0x0:2012x1341)/cdn.vox-cdn.com/uploads/chorus_image/image/47070706/google2.0.0.jpg',
      toggleIcon: '+' 
    },
    methods: {
      toggle : function() {
            // console.log('toggle button click')
            var state = document.getElementById('toggle').style
           
            if(state.display == 'none') {
                state.display = 'block'
            } else {
                state.display = 'none'
            }

            if(state.display == 'none') {
                this.toggleIcon = '+'                
            } else {
                this.toggleIcon = '-'                 
            }

        }
    }
})