title: Vue.js/React/JSX: How to style a tag using a variable in data?
body: <p>I have a html element <code>textarea_01</code> to which I want to add a style when I press my <code>button_01</code> which has an <code>onClick</code> function on it </p>
  
  <pre><code>myFunction: function(event) {
  //some code that does something
  };
  </code></pre>
  
  <p>Since I can't use directives with JSX I was thinking that the following will work:</p>
  
  <pre><code>&lt;textarea id="textareaID" style={{resetWidth}}/&gt;
  </code></pre>
  
  <p>And add to my function that's used on the <code>onClick</code> my code, so it will look like:</p>
  
  <pre><code>myFunction: function(event) {
  var textarea = new Vue({
    el: '#textareaID',
    data: {
      resetWidth: 'width: 10px'
    }
  })
  //some code that does something
  };
  </code></pre>
  
  <p>But it's not working and WebStorm tells me</p>
  
  <pre><code>You are using the runtime-only build of Vue where the template compiler is not available
  </code></pre>
  
  <p>How do I work around this and accomplish what I want to do, which is add a css property to a html element after I click on another element ?</p>
  
  <p>Note: Webpack and the followin is used in the code github.com/vuejs/babel-plugin-transform-vue-jsx Note that almost all built-in Vue directives are not supported when using JSX, the sole exception being v-show, which can be used with the v-show={value} syntax.</p>