Ractive test: Change object across "ractives"

test.html

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ractive/0.8.4/ractive.min.js" integrity="sha256-heXunjNkqBw9mc4urNeQE1t8qZRu4c8jSqjhE7c45BU=" crossorigin="anonymous"></script>



<h1>Ractive test</h1> 
<div style="float: left; width: 50%; background-color: #eee;" id="placeholderOne"></div>
<div style="float: left; width: 50%; background-color: #ddd;" id="placeholderTwo"></div>




<script id='templateOne' type='text/ractive'>
  <h2>This is ractiveOne</h2>
  <p>{{greeting}}, {{user.name}}!</p>
  <button id="save">Save data</button>
</script>

<script id='templateTwo' type='text/ractive'>
  <h2>This is ractiveTwo</h2>
    <p>{{greeting}}, {{user.name}}!</p>
  <button id="test">Change name to Peter</button>
</script>

<script>

  var userdata = {
    name: 'Anders'
  };

  var ractive = new Ractive({
    el: '#placeholderOne',
    template: '#templateOne',
    data: { greeting: 'Hello', user: userdata }
  });

  var ractiveTwo = new Ractive({
    el: '#placeholderTwo',
    template: '#templateTwo',
    data: { greeting: 'Goddag', user: userdata }
  });

  
  $(document).on('click', '#test', function() {
    ractive.set( 'user.name', 'Peter' );
  });

  $(document).on('click', '#save', function() {
    console.dir(ractive.get( 'user' ));
    console.dir(ractiveTwo.get( 'user' ));
  });

</script>