JSFiddle - React, Tailwind, and code Playground

HTML

<h2>Dot notation normally</h2>
<ul id="list1">
  <script id="first_template" type="text/x-handlebars-template">
  {{#each vehicleList}}
   <p>
   Total: {{registrationData.total}}
   {{#each registrationData.vehicleDetail}}
      <li>
         Label: {{name}}
      </li>
  {{/each}}
  {{/each}}
  </script>
 </ul>

<h2>Dot notation with partial</h2>
<script id="list-partial" type="text/x-handlebars-template">
      <li>
         Label: {{name}}
      </li>
</script>

<ul id="list2">
  <script id="second_template" type="text/x-handlebars-template">
  {{#each vehicleList}}
  <p>
   Total: {{registrationData.total}}
   {{#each registrationData.vehicleDetail}}
     {{> list}}
   {{/each}}
   {{/each}}
  </script>
 </ul>

<!-- Necessary libraries -->
<script src="//code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.min.js"></script>

JavaScript

var data = 		
						{"vehicleList":
						[
            
            {"registrationData":
            { "vehicleDetail": [
             {"name": "Make 1"},
             {"name": "Model 1"}
              ],
              "total": "Total 1"}},
              
             {"registrationData":
             { "vehicleDetail": [
             {"name": "Make 2"},
             {"name": "Model 2"}
              ],
              "total": "Total 2"}}
              ]};

// first list straight forward
var compile = Handlebars.compile($('#first_template').html());
$('#list1').html(compile(data));
    
// Second List with a partial    
Handlebars.registerPartial("list", $("#list-partial").html()); 
var compile = Handlebars.compile($('#second_template').html());
$('#list2').html(compile(data));